import {
  Description,
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from '@headlessui/react'
import type { ReactNode } from 'react'

import { LeftArrow } from '~/components/icons/left-arrow'
import { Button } from '~/components/ui/button'
import { APP } from '~/data/meta'

export type ModalProperties = {
  onClose: () => void
  children?: ReactNode
  isOpen?: 'error' | 'warning' | 'resetPassword' | 'register' | 'payment'
}

type DescriptionMap = {
  [key in Exclude<ModalProperties['isOpen'], undefined>]: string
}

const DESCRIPTIONS: DescriptionMap = {
  resetPassword: 'Link Reset Password telah dikirimkan ke email anda',
  register: 'Selamat! Pendaftaran anda berhasil!',
  payment: 'Selamat! Pembayaran anda berhasil!',
  warning:
    'Mohon maaf fitur berikut hanya untuk anggota yang sudah tersubscribe',
  error: 'Terjadi kesalahan. Silakan coba lagi.',
}

export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
  if (!isOpen) return

  const message =
    DESCRIPTIONS[isOpen] || 'Terjadi kesalahan. Silakan coba lagi.'

  return (
    <Dialog
      open={!!isOpen}
      onClose={onClose}
      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-4 max-sm:bg-white sm:items-center">
        <DialogPanel 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-center">
            <button
              onClick={onClose}
              className="absolute top-0 left-0 items-center lg:hidden"
            >
              <LeftArrow
                width={50}
                height={50}
              />
            </button>
            <img
              src={APP.logo}
              alt={APP.title}
              className="h-[80px]"
            />
          </DialogTitle>

          <Description className="text-center text-[#565658]">
            {message}
          </Description>

          <div className="relative">
            <div className="relative flex flex-col items-center justify-center">
              <div className="mb-4 p-4 text-center">
                {['resetPassword', 'register', 'payment'].includes(isOpen) && (
                  <div className="justify-center">
                    <img
                      src={'/images/back-to-home.svg'}
                      alt={APP.title}
                      className="h-[300px]"
                    />
                    <Button
                      className="mt-5 w-full rounded-md"
                      variant={'newsPrimary'}
                      onClick={onClose}
                    >
                      Back to Home
                    </Button>
                  </div>
                )}
                {isOpen === 'warning' && (
                  <div className="justify-center">
                    <img
                      src={'/images/warning.svg'}
                      alt={APP.title}
                      className="h-[300px]"
                    />
                    <div>
                      <Button
                        className="mt-5 w-full rounded-md"
                        variant={'newsPrimary'}
                      >
                        Login
                      </Button>
                      <Button
                        className="mt-5 w-full rounded-md"
                        variant={'newsSecondary'}
                      >
                        Select Subscription
                      </Button>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </DialogPanel>
      </div>
    </Dialog>
  )
}