<script lang="ts" setup>
import type { IAccountChangePasswordResponse, IVerificationNotificationResponse } from '~/types/account'

const form = ref()
const auth = useAuthStore()

const state = reactive({
  current_password: '',
  password: '',
  password_confirmation: '',
})

const { refresh: onSubmit, status: accountPasswordStatus } = useFetch<IAccountChangePasswordResponse>('account/password', {
  method: 'POST',
  body: state,
  immediate: false,
  watch: false,
  async onResponse({ response }) {
    if (response?.status === 422) {
      form.value.setErrors(response._data?.errors)
    }
    else if (response._data?.ok) {
      useToast().add({
        icon: 'i-heroicons-check-circle-20-solid',
        title: 'The password was successfully updated.',
        color: 'primary',
      })

      state.current_password = ''
      state.password = ''
      state.password_confirmation = ''
    }
  },
})

const { refresh: sendResetPasswordEmail, status: resetPasswordEmailStatus } = useFetch<IVerificationNotificationResponse>('verification-notification', {
  method: 'POST',
  body: { email: auth.user.email },
  immediate: false,
  watch: false,
  onResponse({ response }) {
    if (response._data?.ok) {
      useToast().add({
        icon: 'i-heroicons-check-circle-20-solid',
        title: 'A link to reset your password has been sent to your email.',
        color: 'primary',
      })
    }
  },
})
</script>

<template>
  <div>
    <UForm
      v-if="auth.user.has_password"
      ref="form"
      :state="state"
      class="space-y-4"
      @submit="onSubmit"
    >
      <UFormField
        label="Current Password"
        name="current_password"
        required
      >
        <UInput
          v-model="state.current_password"
          type="password"
          autocomplete="off"
        />
      </UFormField>

      <UFormField
        label="New Password"
        name="password"
        hint="min 8 characters"
        :ui="{ hint: 'text-xs text-gray-500 dark:text-gray-400' }"
        required
      >
        <UInput
          v-model="state.password"
          type="password"
          autocomplete="off"
        />
      </UFormField>

      <UFormField
        label="Repeat Password"
        name="password_confirmation"
        required
      >
        <UInput
          v-model="state.password_confirmation"
          type="password"
          autocomplete="off"
        />
      </UFormField>

      <div class="pt-2">
        <UButton
          type="submit"
          label="Save"
          :loading="accountPasswordStatus === 'pending'"
        />
      </div>
    </UForm>

    <UAlert
      v-else
      icon="i-heroicons-information-circle-20-solid"
      title="Send a link to your email to reset your password."
      description="To create a password for your account, you must go through the password recovery process."
      :actions="[
        {
          label: 'Send link to Email',
          variant: 'solid',
          color: 'neutral',
          loading: resetPasswordEmailStatus === 'pending',
          onClick: () => sendResetPasswordEmail(),
        },
      ]"
    />
  </div>
</template>
