<template>
  <div class="form-input flex flex-col">
    <div :class="`label-${labelPosition}`">
      <slot name="label" />
      <div class="w-full">
        <div 
          class="form-input-tag"
          :class="{ 
            disabled: disabled,
            error: error,
          }"
          :style="{
            borderRadius: borderRadius + 'px',
          }"
          @click="$refs.inputTag.focus()"
        >
          <div 
            v-for="(item, index) in modelValue" 
            :key="index"
            class="item-tag"
          >
            {{ item }}
            <base-icon
              iconName="close"
              height="16"
              width="16"
              @click="handleRemove(index)"
            />
          </div>
          <input 
            ref="inputTag"
            type="text"
            v-model="dataValue"
            :disabled="disabled"
            :readonly="readonly"
            :placeholder="modelValue ? (modelValue.length != 0 ? '' : placeholder) : placeholder"
            :maxlength="npwp ? 20 : maxLength"
            :minlength="minLength"
            @keypress="handleValue"
            @change="handleChange"
            @input="maskInput($event.target.value)"
          >
        </div>
        <div
          v-if="message"
          class="helper-text"
          :class="{ 'error-helper': error }"
        >
          {{ message }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";

export default {
  components: {
    BaseIcon,
  },
  props: {
    borderRadius: {
      type: [String, Number],
      default: 6
    },
    modelValue: {
      type: [Array],
    },
    disabled: {
      type: [Boolean],
      default: false
    },
    readonly: {
      type: [Boolean],
      default: false
    },
    placeholder: {
      type: [String],
      default: ""
    },
    error: {
      type: [Boolean],
      default: false,
    },
    message: {
      type: [String],
      default: "",
    },
    maxLength: {
      type: [String, Number],
      default: ""
    },
    minLength: {
      type: [String, Number],
      default: ""
    },
    labelPosition: {
      type: [String],
      validator: function (value) {
        return ["left", "top"].indexOf(value) !== -1;
      },
    },
    npwp: {
      type: Boolean,
      default: false,
    },
    separator: {
      type: [Array],
      default: ["Enter"]
    }
  },
  data() {
    return {
      dataValue: "",
    }
  },
  methods: {
    handleValue(evt) {
      let getKeypress = this.separator.filter(str => {
        return str == evt.key 
      })
      if (getKeypress.length != 0) {
        if (evt.key == getKeypress[0]) {
          this.handleChange()
        }
      }
    },
    handleChange() {
      if (this.dataValue) {
        let _this = this
        let getData = this.modelValue
        let checkDuplicate = this.modelValue.filter(str => {
          return str == _this.dataValue
        })
        if (checkDuplicate.length == 0) {
          if (this.separator.length != 0) {
            let checkSeparator = this.dataValue
            this.separator.forEach(separator => {
              checkSeparator = checkSeparator.replaceAll(separator, "$")
            });
            checkSeparator = checkSeparator.split("$")
            if (checkSeparator.length != 0) {
              checkSeparator.forEach(element => {
                let checkDuplicatePaste = this.modelValue.filter(str => {
                  return str == element
                })
                if (checkDuplicatePaste.length == 0) {
                  getData.push(element)
                }
              });
            }
          } else {
            getData.push(this.dataValue)
          }
        }
        
        setTimeout(() => {
          _this.dataValue = ""
        }, 1);
      }
    },
    handleRemove(index) {
      let getData = this.modelValue
      getData.splice(index, 1)
      this.$emit("handleRemove")
    },
    maskInput(value) {
      if (this.npwp) {
        value = value.replace(/\D/g, ""); // Remove non-numeric characters
        let maskedValue = "";

        for (let i = 0; i < value.length; i++) {
          if (i === 2 || i === 5 || i === 8 || i === 12) {
            maskedValue += `.${value[i]}`;
          } else if (i === 9) {
            maskedValue += `-${value[i]}`;
          } else {
            maskedValue += value[i];
          }
        }

        this.dataValue = maskedValue;
      }
    }
  },
}
</script>

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

.form-input {
  .form-input-tag {
    border: 1px solid #d4d7d8;
    background: #ffffff;
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;

    .item-tag {
      background: $neutral-2;
      border-radius: 4px;
      padding: 2px 4px 2px 7px;
      font-weight: bold;
      font-size: 12px;
      color: $neutral-6;
      display: flex;
      align-items: center;
      margin: 4px 8px 4px 0;

      svg {
        margin-left: 4px;
        cursor: pointer;
      }
    }

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

    input {
      font-size: 14px;
      color: #383e45;
      border: none;
      outline: none;
      padding: 0px;

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

    input:disabled {
      background: transparent;
    }
  }

  .disabled {
    pointer-events: none;
    background: #f5f6f7;
  }

  .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;
  }

  .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;
    }
  }
}
</style>