import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect } from 'react'
import toast from 'react-hot-toast'
import { useFetcher, useNavigate } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod'

import { Button } from '~/components/ui/button'
import { Input } from '~/components/ui/input'
import { InputFile } from '~/components/ui/input-file'
import { TitleDashboard } from '~/components/ui/title-dashboard'

export const staffSchema = z
  .object({
    profile_picture: z
      .string()
      .url({
        message: 'URL tidak valid',
      })
      .or(z.literal('')),
    name: z.string().min(1, {
      message: 'Wajib diisi',
    }),
    password: z.string().min(6, 'Minimal 6 karakter'),
    rePassword: z.string().min(6, 'Minimal 6 karakter'),
    email: z.string().email('Email tidak valid'),
  })
  .refine((field) => field.password === field.rePassword, {
    message: 'Kata sandi tidak sama',
    path: ['rePassword'],
  })
export type TStaffSchema = z.infer<typeof staffSchema>

export const FormStaffPage = () => {
  const fetcher = useFetcher()
  const navigate = useNavigate()
  const formMethods = useRemixForm<TStaffSchema>({
    mode: 'onSubmit',
    fetcher,
    resolver: zodResolver(staffSchema),
  })

  const { handleSubmit } = formMethods

  useEffect(() => {
    if (!fetcher.data?.success && fetcher.data?.message) {
      toast.error(fetcher.data.message)
    }

    if (fetcher.data?.success) {
      toast.success(`Staff berhasil dibuat!`)
      navigate('/lg-admin/staffs')
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [fetcher.data])

  return (
    <div className="relative">
      <TitleDashboard title={`Buat Staf`} />
      <div>
        <RemixFormProvider {...formMethods}>
          <fetcher.Form
            method="post"
            onSubmit={handleSubmit}
            action={`/actions/admin/staffs/create`}
            className="space-y-4"
          >
            <div className="flex items-end justify-between gap-4">
              <Input
                id="name"
                label="Nama Staf"
                placeholder="Masukkan nama staf"
                name="name"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
              />
              <Input
                id="email"
                label="Email"
                placeholder="Contoh: legal@legalgo.id"
                name="email"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
              />
              <Button
                isLoading={fetcher.state !== 'idle'}
                disabled={fetcher.state !== 'idle'}
                type="submit"
                size="lg"
                className="text-md h-[42px] rounded-md"
              >
                Simpan
              </Button>
            </div>
            <div className="flex items-end justify-between gap-4">
              <Input
                id="password"
                label="Kata Sandi"
                placeholder="Masukkan Kata Sandi"
                name="password"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
                type="password"
              />
              <Input
                id="re-password"
                label="Ulangi Kata Sandi"
                placeholder="Masukkan Kata Sandi"
                name="rePassword"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
                type="password"
              />
              <InputFile
                id="profile_picture"
                label="Gambar Profil"
                placeholder="Unggah gambar profil Anda"
                name="profile_picture"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
                category="profile_picture"
              />
            </div>
          </fetcher.Form>
        </RemixFormProvider>
      </div>
    </div>
  )
}