import {
  Description,
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from '@headlessui/react'
import { useEffect, type Dispatch, type SetStateAction } from 'react'
import toast from 'react-hot-toast'
import { useFetcher } from 'react-router'

import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
import { Button } from '~/components/ui/button'
import { formatNumberWithPeriods } from '~/utils/formatter'

type TProperties = {
  selectedItem?: TSubscribePlanResponse
  setSelectedItem: Dispatch<SetStateAction<TSubscribePlanResponse | undefined>>
}

export const DialogDelete = (properties: TProperties) => {
  const { selectedItem, setSelectedItem } = properties || {}
  const fetcher = useFetcher()

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

    if (fetcher.data?.success === true) {
      setSelectedItem(undefined)
      toast.success('Subscribe plan berhasil dihapus!')
      return
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [fetcher.data])

  return (
    <Dialog
      open={!!selectedItem}
      onClose={() => {
        if (fetcher.state === 'idle') {
          setSelectedItem(undefined)
        }
      }}
      className="relative z-50"
      transition
    >
      <DialogBackdrop
        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
        transition
      />
      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
        <DialogPanel
          transition
          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
        >
          <DialogTitle className="relative flex justify-start text-xl font-bold">
            Anda akan menghapus subscribe plan berikut?
          </DialogTitle>
          <Description className="space-y-1 text-center text-[#565658]">
            <p>{selectedItem?.name}</p>
            <p>Length: {selectedItem?.length}</p>
            <p>
              Harga: Rp. {formatNumberWithPeriods(selectedItem?.price || 0)}
            </p>
          </Description>
          <div className="flex justify-end">
            <fetcher.Form
              method="POST"
              action={`/actions/admin/subscribe-plan/delete/${selectedItem?.id}`}
              className="grid"
            >
              <Button
                type="submit"
                variant="newsDanger"
                className="text-md h-[42px] rounded-md"
                disabled={fetcher.state !== 'idle'}
                isLoading={fetcher.state !== 'idle'}
              >
                Hapus
              </Button>
            </fetcher.Form>
          </div>
        </DialogPanel>
      </div>
    </Dialog>
  )
}