'use client';

import { MouseEventHandler, RefObject, useState } from 'react';

import { Icon } from '@iconify/react';
import Modal from '@/components/Modal';
import Button, { ButtonProps } from '@/components/Button';

import { cn } from '@/lib/helper';

export interface ConfirmationModalProps {
  ref: RefObject<HTMLDialogElement | null>;
  type?: 'info' | 'success' | 'error';
  text?: string;
  closeOnBackdrop?: boolean;
  primaryButton?: ButtonProps & {
    text?: string;
  };
  secondaryButton?: ButtonProps & {
    text?: string;
  };
  className?: {
    modal?: string;
    modalBox?: string;
  };
  children?: React.ReactNode;
}

const ConfirmationModal = ({
  ref,
  type = 'info',
  text,
  closeOnBackdrop,
  primaryButton,
  secondaryButton,
  className,
  children,
}: ConfirmationModalProps) => {
  const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);

  const closeModalHandler = () => {
    ref.current?.close();
  };

  const primaryButtonClickHandler: MouseEventHandler<
    HTMLButtonElement
  > = async (event) => {
    setIsPrimaryButtonLoading(true);

    await primaryButton?.onClick?.(event);

    setIsPrimaryButtonLoading(false);
  };

  return (
    <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
      <div className='w-full flex flex-col gap-4'>
        <div
          className={cn(
            'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
            {
              'bg-error': type === 'error',
              'bg-info': type === 'info',
              'bg-success': type === 'success',
            }
          )}
        >
          {type === 'info' && (
            <Icon
              icon='material-symbols:info-outline-rounded'
              width={64}
              height={64}
              className='text-info-content'
            />
          )}

          {type === 'success' && (
            <Icon
              icon='qlementine-icons:success-12'
              width={64}
              height={64}
              className='text-success-content'
            />
          )}

          {type === 'error' && (
            <Icon
              icon='solar:danger-triangle-linear'
              width={64}
              height={64}
              className='text-error-content'
            />
          )}
        </div>

        <p className='text-center font-medium'>
          {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
        </p>

        {children && <div className='w-full'>{children}</div>}

        <div className='w-full flex flex-row gap-2'>
          {secondaryButton && secondaryButton.text && (
            <Button
              {...secondaryButton}
              variant='ghost'
              color={secondaryButton?.color}
              isLoading={secondaryButton?.isLoading}
              disabled={
                secondaryButton?.isLoading !== undefined
                  ? secondaryButton?.isLoading
                  : isPrimaryButtonLoading
              }
              onClick={closeModalHandler}
              className='grow'
            >
              {secondaryButton?.text ?? 'Tidak'}
            </Button>
          )}

          {primaryButton && primaryButton.text && (
            <Button
              {...primaryButton}
              color={primaryButton?.color ?? 'info'}
              onClick={primaryButtonClickHandler}
              isLoading={
                primaryButton?.isLoading !== undefined
                  ? primaryButton?.isLoading
                  : isPrimaryButtonLoading
              }
              disabled={
                primaryButton?.isLoading !== undefined
                  ? primaryButton?.isLoading
                  : isPrimaryButtonLoading
              }
              className='grow'
            >
              {primaryButton?.text ?? 'Ya'}
            </Button>
          )}
        </div>
      </div>
    </Modal>
  );
};

export default ConfirmationModal;