<template>
  <div class="form-textarea flex flex-col">
    <div :class="`label-${labelPosition}`">
      <slot name="label" />
      <div class="w-full">
        <textarea 
          class="w-full"
          data-test="base-form-textarea"
          :cols="cols" 
          :rows="rows" 
          :maxlength="maxLength"
          :class="{
            error: error,
            'text-right': textAlign == 'right',
            'text-left': textAlign == 'left',
            'no-resize': noResize
          }"
          :placeholder="placeholder"
          :disabled="disabled"
          @input="updateInput"
          v-model="dataValue"
          :readonly="readonly"
        />
        <div
          v-if="message"
          class="helper-text"
          :class="{ 'error-helper': error }"
          v-html="message"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cols: {
      type: [String, Number],
      default: ""
    },
    rows: {
      type: [String, Number],
      default: ""
    },
    maxLength: {
      type: [String, Number],
      default: ""
    },
    placeholder: {
      type: [String],
      default: "Your text input here",
    },
    disabled: {
      type: [Boolean],
      default: false,
    },
    error: {
      type: [Boolean],
      default: false,
    },
    message: {
      type: [String],
      default: "",
    },
    textAlign: {
      type: [String],
      default: "left",
      validator: function (value) {
        return ["left", "right"].indexOf(value) !== -1;
      },
    },
    modelValue: {
      type: [String, Number, Array, Object],
    },
    labelPosition: {
      type: [String],
      validator: function (value) {
        return ["left", "top"].indexOf(value) !== -1;
      },
    },
    readonly: {
      type: [Boolean],
      default: false,
    },
    noResize: {
      type: [Boolean],
      default: false,
    },
    type: {
      type: [String],
      default: "text",
      validator: function (value) {
        return ["text", "number", "password", "alphanumeric", "alphanumericspace"].indexOf(value) !== -1;
      },
    },
  },
  data() {
    return {
      dataValue: ""
    }
  },
  watch: {
    dataValue(newVal) {
      this.dataValue = this.processFilter(newVal)
      this.$emit("update:modelValue", newVal);
    },
    modelValue(newVal) {
      this.dataValue = newVal
    }
  },
  mounted() {
    this.dataValue = this.modelValue
  },
  methods: {
    updateInput(event) {
      this.$emit("update:modelValue", event.target.value);
    },
    processFilter: function (val) {
      if (this.type == "email") val = val.toLowerCase();
      if (this.type == "number") return val ? String(val).replace(/[^0-9]/g, "") : val;
      if (this.type == "alphanumeric") return String(val).replace(/[^0-9a-zA-Z]/g, "");
      if (this.type == "alphanumericspace") return String(val).replace(/[^0-9 a-zA-Z]/g, "");
      else return val;
    },
  },
}
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.form-textarea {
  .no-resize {
    resize: none;
  }
  
  .label-top {
    display: flex;
    flex-flow: column;

    .typo-text {
      margin-bottom: 8px;
    }
  }

  .label-left {
    display: flex;

    .typo-text {
      margin-right: 12px;
      height: 37px;
      align-self: flex-start;
      display: flex;
      align-items: center;
      min-width: fit-content;
    }
  }

  textarea {
    border: 1px solid $neutral-2;
    background: $neutral-0;
    border-radius: 6px;
    padding: 8px 16px;
    outline: none;
    font-size: 14px;
    color: $neutral-6;
    max-width: -webkit-fill-available;
    resize: vertical;

    &:hover,
    &:focus {
      border-color: $dark-blue-4;
    }

    &::placeholder {
      color: $neutral-3;
    }

    &:disabled {
      background: $neutral-1;
      border-color: $neutral-2;
    }
  }

  .error {
    border-color: $critical-4;
    &:hover,
    &:focus {
      border-color: $critical-4;
    }
  }

  .helper-text {
    font-size: 10px;
    margin-top: 4px;
    color: $neutral-6;
  }

  .error-helper {
    color: $critical-4;
  }
}
</style>
