<template>
  <FormWrapper
    class="password-input"
    :class="states"
    :label="label"
    :error="error"
  >
    <div class="wrapper">
      <input
        class="grow h600"
        :type="isHidden ? 'password' : 'tel'"
        :class="{ disabled }"
        :value="modelValue"
        :placeholder="placeholder"
        @input="changeHandler"
        @accept="changeHandler"
        @keydown.enter="submit"
        v-focus-directive="focus"
        v-mask-directive="mask"
        v-max-length-directive="maxLength"
        inputmode="numeric"
        autocomplete="new-password"
        autofill="off"
      />
      <div class="icon" @click="toggleHidden">
        <SpIcon v-if="isHidden" name="sp-unhide" />
        <SpIcon v-else name="sp-hide" />
      </div>
    </div>
  </FormWrapper>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import FormWrapper from "../FormWrapper.vue";
import FormMixin from "@/mixins/FormMixin";
import { FocusDirective } from "@/directives/focus";
import { MaskDirective } from "@/directives/mask-directive";
import { MaxLengthDirective } from "@/directives/max-length";
export default defineComponent({
  mixins: [FormMixin],
  emits: ["update:modelValue"],
  props: {
    disabled: {
      default: false,
      type: Boolean,
    },
    modelValue: {
      type: [String],
      required: true,
    },
    placeholder: {
      type: String,
      default: "•••••",
    },
    digits: {
      type: Boolean,
      default: true,
    },
    maxLength: {
      type: Number,
      default: 5,
    },
  },
  components: {
    FormWrapper,
  },
  directives: {
    FocusDirective,
    MaskDirective,
    MaxLengthDirective,
  },
  setup({ disabled, maxLength }, { emit }) {
    const isHidden = ref(true);
    const main = ref(false);
    const password = ref("");

    const mask = {
      mask: /^[0-9]*$/,
    };

    onMounted(() => {
      main.value = maxLength === 5;
    });

    const toggleHidden = (): void => {
      isHidden.value = !isHidden.value;
    };

    const changeHandler = (event: any): void => {
      emit("update:modelValue", event.target.value);
    };

    return {
      isHidden,
      password,
      toggleHidden,
      changeHandler,
      disabled,
      mask,
    };
  },
});
</script>

<style scoped lang="scss">
.area-input {
  --height: 160px;

  textarea {
    background-color: var(--background);
    border: 1px solid var(--border-color);
    padding: var(--form-side-padding);
    border-radius: var(--form-border-radius);
    height: var(--height);
    transition: border 0.3s ease;
    width: 100%;

    &::placeholder {
      color: var(--form-placeholder-color);
    }

    &:focus {
      border-color: var(--form-border-color-focus);
    }
  }
}
</style>

<style scoped lang="scss">
.password-input {
  .wrapper {
    background-color: var(--background);
    border-radius: var(--form-border-radius);
    position: relative;
    letter-spacing: 5px;
  }

  input {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0 var(--form-side-padding);
    border-radius: var(--form-border-radius);
    color: var(--text-color);
    pointer-events: var(--pointer-events);
    height: var(--height);
    transition: var(--transition);
    width: 100%;
    position: relative;
    z-index: 1;
    letter-spacing: inherit;

    &:-webkit-credentials-auto-fill-button,
    &:-webkit-contacts-auto-fill-button,
    &:-webkit-autofill {
      visibility: hidden;
      display: none !important;
      pointer-events: none;
      position: absolute;
      right: 0;
    }

    &:focus {
      --border-color: var(--form-border-color-focus);
      box-shadow: var(--form-box-shadow);
    }
  }

  .placeholder {
    color: var(--form-placeholder-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 var(--form-side-padding);
    pointer-events: none;
    border: 1px solid transparent;
    letter-spacing: inherit;

    @include desktop-1280max() {
      top: calc(50% + 1px);
    }
  }

  .icon {
    position: absolute;
    top: 50%;
    right: var(--form-side-padding);
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
  }
}
</style>
