<template>
  <v-row class="py-4 justify-end" tag="form" @submit.prevent="onSubmit">
    <v-col cols="12" md="6">
      <v-text-field
          v-model.trim="form.first_name"
          :disabled="getUser"
          :error="$v.form.first_name.$dirty && $v.form.first_name.$error"
          :error-messages="getErrors($v.form.first_name)"
          :hint="validationLength(30, form.first_name.length)"
          hide-details="auto"
          label="First Name"
          maxlength="30"
          placeholder="First Name *"
          required
          type="text"
          variant="outlined"
          @blur="$v.form.first_name.$touch()"
      />
    </v-col>
    <v-col cols="12" md="6">
      <v-text-field
          v-model.trim="form.last_name"
          :disabled="getUser"
          :error="$v.form.last_name.$dirty && $v.form.last_name.$error"
          :error-messages="getErrors($v.form.last_name)"
          :hint="validationLength(70, form.last_name.length)"
          hide-details="auto"
          label="Last Name"
          maxlength="70"
          placeholder="Last Name*"
          required
          type="text"
          variant="outlined"
          @blur="$v.form.last_name.$touch()"
      />
    </v-col>
    <v-col cols="12">
      <v-text-field
          v-model.trim="form.login"
          :disabled="getUser"
          :error="$v.form.login.$dirty && $v.form.login.$error"
          :error-messages="getErrors($v.form.login)"
          hide-details="auto"
          label="Email"
          placeholder="Email*"
          required
          type="email"
          variant="outlined"
          @blur="$v.form.login.$touch()"
      />
    </v-col>
    <template v-if="!logged">
      <v-col cols="12" md="6">
        <v-text-field
            v-model.trim="form.password"
            :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
            :disabled="getUser"
            :error="$v.form.password.$dirty && $v.form.password.$error"
            :error-messages="getErrors($v.form.password)"
            :hint="validationLength(30, form.password.length)"
            :type="!showPassword ? 'password' : 'text'"
            hide-details="auto"
            label="Password"
            maxlength="30"
            placeholder="Password*"
            required
            variant="outlined"
            @blur="$v.form.password.$touch()"
            @click:append-inner="showPassword = !showPassword"
        />
      </v-col>
      <v-col cols="12" md="6">
        <v-text-field
            v-model.trim="form.password_confirmation"
            :append-inner-icon="showPasswordConfirm ? 'mdi-eye' : 'mdi-eye-off'"
            :disabled="getUser"
            :error="
            $v.form.password_confirmation.$dirty &&
            $v.form.password_confirmation.$error
          "
            :error-messages="getErrors($v.form.password_confirmation)"
            :type="!showPasswordConfirm ? 'password' : 'text'"
            hide-details="auto"
            label="Confirm Password"
            placeholder="Confirm Password*"
            required
            variant="outlined"
            @blur="$v.form.password_confirmation.$touch()"
            @click:append-inner="showPasswordConfirm = !showPasswordConfirm"
        />
      </v-col>
    </template>
    <v-row class="mt-5" no-gutters>
      <v-col class="pa-3" cols="6">
        <v-btn
            v-if="props.bind?.prev"
            :disabled="!props.bind?.prev?.valid"
            block
            color="primary"
            height="50"
            variant="outlined"
            @click="emit('previousStep', props.bind?.prev?.id)">
          Previous
        </v-btn>
      </v-col>

      <v-col class="pa-3" cols="6">
        
        <v-btn
          :loading="props.loading"
          :variant="props.variantSubmit"
          block
          color="primary"
          height="50"
          type="submit"
        >
          {{ getUser ? 'Next' : 'Submit' }}
        </v-btn>
      </v-col>
    </v-row>
  </v-row>
</template>

<script setup>
const { storeToRefs } = Pinia;
const { useVuelidate } = Vuelidate;
const { email, maxLength, minLength, required, sameAs } = VuelidateValidators;

const showPasswordConfirm = Vue.ref(false)
const showPassword = Vue.ref(false)
const store = window.useUserStore()
const {getUser} = storeToRefs(store)
const emit = defineEmits(["update:modelValue", "update:actions", "submit", "previousStep", "nextStep"])
const props = defineProps({
  actions: { type: Object, default: () => {} },
  loading: { type: Boolean, default: false },
  logged: { type: Boolean, default: false },
  modelValue: { type: Object, default: () => {} },
  bind: { type: Object, default: () => {} },
  variantSubmit: { type: String, default: 'outlined' }
})

const form = Vue.ref({
  first_name: "",
  last_name: "",
  login: "",
  password: "",
  password_confirmation: "",
})

const rules = {
  form: {
    first_name: {
      required,
      maxLength: maxLength(30)
    },
    last_name: {
      required,
      maxLength: maxLength(70)
    },
    login: {
      required,
      email,
    },
    password: {
      required,
      minLength: minLength(5),
      maxLength: maxLength(30)
    },
    password_confirmation: {
      required,
      sameAs: sameAs(Vue.computed(() => form.value.password)),
    },
  },
}

Vue.watch(
    form,
    () => {
      emit("update:modelValue", form.value)
    },
    {deep: true}
)
Vue.watch(
    props.modelValue,
    (val) => {
      Object.assign(form.value, val)
    },
    {immediate: true, deep: true}
)

const $v = useVuelidate(rules, {form})

const onSubmit = () => {
  $v.value.form.$touch()
  if ($v.value.form.$invalid) return
  emit("submit", form.value)
}

Vue.onMounted(() => {
  emit("update:actions", {submit: onSubmit})
})

const getErrors = ($v) => {
  if ($v.$dirty && $v.$errors?.length)
    return $v.$errors.map((e) => {
      switch (e.$validator) {
        case "sameAs":
          return "Passwords do not match"
        default:
          return e.$message
      }
    })
  else return []
}

// const userLoggedEmitNextStep = () => {
//   if (getUser.value) {
//     emit('nextStep', props.bind.next.id)
//   }
// }

const validationLength = (num, value) => String(Number(num - value))
</script>