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

import { LeftArrow } from '~/components/icons/left-arrow'
import { Button } from '~/components/ui/button'
import { APP } from '~/configs/meta'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news'

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 DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
  const { setIsLoginOpen, setIsSubscribeOpen } = useNewsContext()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
  const { userData } = loaderData || {}

  const message = isOpen
    ? 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-0 max-sm:bg-white sm:items-center sm:p-4">
        <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"
          transition
        >
          <DialogTitle className="relative flex justify-center">
            <button
              onClick={onClose}
              className="absolute top-0 left-0 items-center sm: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">
              {['resetPassword', 'register', 'payment'].includes(
                isOpen || '',
              ) && (
                <>
                  <img
                    src={'/images/back-to-home.svg'}
                    alt={APP.title}
                    className="h-[300px]"
                  />
                  <Button
                    className="mt-5 w-full rounded-md"
                    variant="newsPrimary"
                    as={Link}
                    to="/"
                    onClick={onClose}
                  >
                    Back to Home
                  </Button>
                </>
              )}
              {isOpen === 'warning' && (
                <>
                  <img
                    src={'/images/warning.svg'}
                    alt={APP.title}
                    className="h-[300px]"
                  />
                  {userData ? (
                    <Button
                      className="mt-5 w-full rounded-md"
                      variant="newsSecondary"
                      onClick={() => {
                        onClose()
                        setIsSubscribeOpen(true)
                      }}
                    >
                      Select Subscribe Plan
                    </Button>
                  ) : (
                    <Button
                      className="mt-5 w-full rounded-md"
                      variant="newsPrimary"
                      onClick={() => {
                        onClose()
                        setIsLoginOpen(true)
                      }}
                    >
                      Login
                    </Button>
                  )}
                </>
              )}
            </div>
          </div>
        </DialogPanel>
      </div>
    </Dialog>
  )
}