<template>
  <v-input ref="nBaseInput" :rules="computedRules" :value="value">
    <div
      :class="[
        'pkg-base-n-input n-gap-3',
        wrapperClass,
        {
          'n-input--error': hasError,
          'n-input--filled': filled,
          'n-input--disabled': disabled,
        },
      ]"
    >
      <slot name="label-content">
        <div v-if="label" class="n-input-label-hint-wrapper n-flex n-gap-1">
          <label
            :class="[
              'n-input-label n-text-body1 n-font-bold n-color-main-font',
              { 'n-color-danger': hasError },
            ]"
          >
            {{ label }}
          </label>
          <span
            v-if="required"
            class="n-color-danger n-text-body1 n-font-normal"
          >
            *
          </span>
          <!-- Todo: Hint section -->
        </div>
      </slot>
      <slot :hasError="hasError" />
      <slot name="helperText">
        <div
          v-if="helperText"
          class="n-input-helper-text n-text-body3 n-font-normal"
        >
          {{ helperText }}
        </div>
      </slot>
    </div>

    <template #message="{ message }">
      <div
        class="n-mt-3 n-input-helper-text n-color-danger n-text-body3 n-font-normal"
      >
        {{ message }}
      </div>
    </template>
  </v-input>
</template>

<script>
export default {
  name: "NInput",
  props: {
    rules: {
      type: Array,
      default: () => [],
    },
    value: null,
    label: {
      type: String,
      default: "",
    },
    filled: {
      type: Boolean,
      default: false,
    },
    prependIcon: {
      type: String,
      default: "",
    },
    wrapperClass: {
      type: String,
      default: "",
    },
    appendIcon: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    helperText: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isMounted: false,
    };
  },
  computed: {
    computedRules() {
      const { rules, disabled } = this;

      return disabled ? [] : rules;
    },
    hasError() {
      if (this.isMounted) {
        const { $refs } = this;
        const { hasError, validationState } = $refs.nBaseInput;
        const isErrorState = validationState === "error";

        return Boolean(hasError && isErrorState);
      }

      return false;
    },
  },
  mounted() {
    this.isMounted = true;
  },
  methods: {
    updateValidity(isError) {
      this.hasError = isError;
    },
  },
};
</script>

<style scoped>
@import url("./n-input.css");
</style>
