<template>
  <label class="RInput">
    <span class="RInput__Label">{{ label }}</span>
    <input
      class="RInput__Input"
      :value="value"
      :placeholder="placeholder"
      :disabled="disable"
      @input="onInput"
      ref="input"
    />
    <q-tooltip v-if="notifyMessage" max-width="300px">
      {{ notifyMessage }}
    </q-tooltip>
    <q-icon
      v-if="clearIcon"
      class="RInput__CloseIcon"
      name="pgs-close"
      @click="clearInput"
    />
  </label>
</template>

<script lang="ts">
import { Component, Prop, Vue, Ref, Model } from 'vue-property-decorator';
import { Mask } from '@/types/utils';

@Component({})
export default class RInput extends Vue {
  @Ref('input')
  input: HTMLInputElement;

  @Prop()
  mask?: Mask;

  @Prop()
  label: string;

  @Prop({ default: () => false })
  clearIcon: boolean;

  @Prop({ default: () => '' })
  notifyMessage: string;

  @Model('input')
  value: string;

  @Prop()
  placeholder: string;

  @Prop({ default: false })
  disable: boolean;

  @Prop({ type: String, default: 'text' }) readonly type: string;

  onInput(event: Event): void {
    const value = (event.target as HTMLInputElement).value;
    const processedValue = this.mask ? this.mask(value) : value;

    this.input.value = processedValue;
    this.$emit('input', processedValue);
  }

  clearInput() {
    const value = '';
    this.input.value = value;
    this.$emit('input', value);
  }
}
</script>

<style lang="scss" scoped>
.RInput {
  position: relative;
  display: flex;
  flex-direction: column;
  &__Label {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.58);
    margin-bottom: 4px;
  }
  &__Input {
    background: #e5edf5;
    border-radius: 4px 4px 0 0;
    background-blend-mode: multiply;
    border: none;
    border-bottom: 1px solid rgba(1, 72, 116, 0.18);
    padding: 8px;
    box-sizing: border-box;
    transition: 0.1s;
    height: 40px;
    &:focus {
      transition: 0.1s;
      outline: none;
      background-color: white;
      box-shadow: inset 0 0 2px rgba(15, 104, 160, 0.87);
      border-color: #1487cf;
    }
  }
  &__CloseIcon {
    position: absolute;
    top: 15px;
    right: 15px;
    transform: translate(50%, 50%);
    font-size: 25px;
    color: #cf5f14;
    cursor: pointer;
    &:active {
      color: #ff0000;
    }
  }
}
</style>
