import Image from 'next/image'
import { useState } from 'react'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'clsx'

import { Loader } from '../../design/Loader'

export interface ConfirmPopupProps {
  className?: string
  title: string
  handleYes: () => void | Promise<void>
  handleNo: () => void | Promise<void>
}

export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
  const { t } = useTranslation()
  const [isLoading, setIsLoading] = useState(false)

  const handleYesLoading = async (): Promise<void> => {
    setIsLoading((isLoading) => {
      return !isLoading
    })
    await props.handleYes()
  }

  return (
    <div className={props.className}>
      <Loader
        className={classNames(
          'absolute left-1/2 top-1/2 scale-0 transition-all',
          {
            'scale-100': isLoading
          }
        )}
      />
      <div
        className={classNames(
          'visible flex flex-col items-center opacity-100 transition-all',
          {
            'invisible opacity-0': isLoading
          }
        )}
      >
        <Image
          quality={100}
          src='/images/svg/design/join-guild.svg'
          alt='Illustration'
          height={150}
          width={150}
        />
        <div className='mt-8 flex flex-col'>
          <h1 className='mb-6 text-center text-xl'>{props.title}</h1>
          <div className='flex gap-7'>
            <button
              className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
              onClick={handleYesLoading}
              data-cy='confirm-popup-yes-button'
            >
              {t('common:yes')}
            </button>
            <button
              className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
              onClick={props.handleNo}
              data-cy='confirm-popup-no-button'
            >
              {t('common:no')}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}