<script lang="ts" setup>
import { useForm } from '@inertiajs/vue3'
import { ref } from 'vue'
import AuthLayout from '@/Layouts/AuthLayout.vue'

interface Props {
  token: string
  email: string
}

defineOptions({ layout: AuthLayout })

const props = defineProps<Props>()

const isPasswordVisible = ref(false)

const form = useForm({
  token: props.token,
  email: props.email,
  password: '',
  password_confirmation: '',
})

const submit = (): void => {
  form.post('/reset-password', {
    onFinish: () => form.reset('password', 'password_confirmation'),
  })
}
</script>

<template>
  <VCardText>
    <h4 class="text-h4 mb-1">
      Set new password
    </h4>
    <p class="mb-0">
      Your new password must be different from previously used passwords
    </p>
  </VCardText>

  <VCardText>
    <VForm @submit.prevent="submit">
      <VRow>
        <VCol cols="12">
          <VTextField
            v-model="form.email"
            label="Email"
            type="email"
            required
            placeholder="john@example.com"
            :error-messages="form.errors.email ? [form.errors.email] : []"
          />
        </VCol>

        <VCol cols="12">
          <VTextField
            v-model="form.password"
            label="New Password"
            placeholder="············"
            :type="isPasswordVisible ? 'text' : 'password'"
            required
            :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
            :error-messages="form.errors.password ? [form.errors.password] : []"
            @click:append-inner="isPasswordVisible = !isPasswordVisible"
          />
        </VCol>

        <VCol cols="12">
          <VTextField
            v-model="form.password_confirmation"
            label="Confirm Password"
            placeholder="············"
            :type="isPasswordVisible ? 'text' : 'password'"
            required
            :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
            @click:append-inner="isPasswordVisible = !isPasswordVisible"
          />
        </VCol>

        <VCol cols="12">
          <VBtn
            type="submit"
            block
            :loading="form.processing"
            :disabled="form.processing"
          >
            Reset password
          </VBtn>
        </VCol>
      </VRow>
    </VForm>
  </VCardText>
</template>
