import React, { ReactElement } from 'react';
import { twMerge } from 'tailwind-merge';

import Button, { ButtonShape, ButtonSize } from '@/components/button/Button';
import { GenresIcon } from '@/icons';

import Modal from './Modal';

interface ConfirmationModalV2Props {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  onAction?: () => void;
  title: string;
  message?: string;
  icon?: React.FC<React.SVGProps<SVGSVGElement>>;
  renderMessage?: () => ReactElement;
  confirmButtonText?: string;
  cancelButtonText?: string;
  actionButtonText?: string;
  actionButtonClassName?: string;
}

const ConfirmationModalV2: React.FC<ConfirmationModalV2Props> = ({
  isOpen,
  onClose,
  onConfirm,
  onAction,
  title,
  icon,
  message,
  renderMessage,
  actionButtonText,
  actionButtonClassName = '',
  confirmButtonText = 'Confirm',
}) => {
  if (!isOpen) return null;
  const IconComponent = icon || GenresIcon;

  return (
    <Modal
      onClose={onClose}
      title={title}
      titleClassName='font-sans text-center text-2xl font-bold'
      titleWrapperClasses='justify-center'
      wrapperClasses='overflow-y-auto'
      contentWrapperClasses='mx-[24px]'
      renderIcon={() => <IconComponent className='h-12 w-12 fill-primary' />}
    >
      <div>{renderMessage ? renderMessage() : message || ''}</div>
      <div className='mt-4 flex w-auto flex-col items-center justify-center gap-2 px-4 pb-4'>
        {!!onAction ? (
          <Button
            shape={ButtonShape.Pill}
            size={ButtonSize.Medium}
            onClick={() => {
              onAction();
              onClose();
            }}
            className={twMerge(
              'w-auto min-w-[200px] before:bg-(image:--button-background-aura-orange) before:bg-cover before:bg-center before:opacity-80 hover:before:opacity-100 hover:before:brightness-120',
              actionButtonClassName
            )}
          >
            {actionButtonText}
          </Button>
        ) : null}
        <Button
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          className='w-auto min-w-[200px]'
          onClick={() => {
            onConfirm();
            onClose();
          }}
        >
          {confirmButtonText || 'Confirm'}
        </Button>
      </div>
    </Modal>
  );
};

export default ConfirmationModalV2;