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

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

const state = reactive({
  ...{
    email: auth.user.email,
    name: auth.user.name,
    avatar: auth.user.avatar,
  },
})

const { refresh: sendEmailVerification, status: resendEmailStatus } = useFetch<IVerificationNotificationResponse>('verification-notification', {
  method: 'POST',
  body: { email: state.email },
  immediate: false,
  watch: false,
  onResponse({ response }) {
    if (response._data?.ok) {
      useToast().add({
        icon: 'i-heroicons-check-circle-20-solid',
        title: response._data.message,
        color: 'primary',
      })
    }
  },
})

const { refresh: onSubmit, status: accountUpdateStatus } = useFetch<IAccountUpdateResponse>('account/update', {
  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: 'Account details have been successfully updated.',
        color: 'primary',
      })

      await auth.fetchUser()

      state.name = auth.user.name
      state.email = auth.user.email
      state.avatar = auth.user.avatar
    }
  },
})
</script>

<template>
  <UForm
    ref="form"
    :state="state"
    class="space-y-4"
    @submit="onSubmit"
  >
    <UFormField
      label=""
      name="avatar"
      class="flex"
    >
      <InputUploadAvatar
        v-model="state.avatar"
        accept=".png, .jpg, .jpeg, .webp"
        entity="avatars"
        max-size="2"
      />
    </UFormField>

    <UFormField
      label="Name"
      name="name"
      required
    >
      <UInput
        v-model="state.name"
        type="text"
      />
    </UFormField>

    <UFormField
      label="Email"
      name="email"
      required
    >
      <UInput
        v-model="state.email"
        placeholder="you@example.com"
        icon="i-heroicons-envelope"
        trailing
        type="email"
      />
    </UFormField>

    <UAlert
      v-if="auth.user.must_verify_email"
      variant="subtle"
      color="warning"
      icon="i-heroicons-information-circle-20-solid"
      title="Please confirm your email address."
      description="A confirmation email has been sent to your email address. Please click on the confirmation link in the email to verify your email address."
      :actions="[
        {
          label: 'Resend verification email',
          variant: 'solid',
          color: 'neutral',
          loading: resendEmailStatus === 'pending',
          onClick: () => sendEmailVerification(),
        },
      ]"
    />

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