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'

type ModalProperties = {
  isOpen: boolean
  onClose: () => void
  children?: ReactNode
  type:
    | 'success'
    | 'error'
    | 'warning'
    | 'success-reset-password'
    | 'success-register'
    | 'success-payment'
}
type DescriptionMap = {
  [key in ModalProperties['type']]: string
}

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

export const SuccessModal = ({
  isOpen,
  onClose,
  type = 'success-register',
}: ModalProperties) => {
  if (!isOpen) return

  const message = DESCRIPTIONS[type] || '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">
                {[
                  'success-reset-password',
                  'success-register',
                  'success-payment',
                ].includes(type) && (
                  <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>
                )}
                {type === '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>
  )
}