'use client';
import clsx from 'clsx';
import { forwardRef, useEffect, useImperativeHandle, useState, } from 'react';
import { IoCloseSharp } from 'react-icons/io5';
import { Button, Paragraph } from '../../01-atoms';
const enteringClasses = 'ease-out duration-300 opacity-0';
const leavingClasses = 'ease-in duration-200 opacity-75';
/**
 * Modal component for displaying a modal dialog with customizable header, content, and buttons.
 *
 * @component
 * @example
 * // Example usage of Modal component
 * <Modal
 *   header="Modal Header"
 *   handleCloseIcon={ (close) => close(() => console.log("closed")) }
 *   cancelButton={{ text: "Cancel", callback: (close) => close(() => console.log("Cancelled")) }}
 *   cancelButton={{ text: "Cancel", callback: (close) => close(() => console.log("Cancelled")) }}
 *   classHeader="bg-gray-1"
 *   size="lg"
 * >
 *   <p>Modal content goes here.</p>
 * </Modal>
 *
 * @param {Object} props - The properties of the Modal component.
 * @param {string} props.header - The header text of the modal.
 * @param {ReactNode} props.children - The content to be displayed inside the modal.
 * @param {Object} [props.confirmButton] - Configuration for the confirm button.
 * @param {Function} props.confirmButton.callback - Callback function triggered on confirm.
 * @param {boolean} [props.confirmButton.disabled] - Whether the confirm button is disabled.
 * @param {Object} [props.cancelButton] - Configuration for the cancel button.
 * @param {string} props.cancelButton.text - Text displayed on the cancel button.
 * @param {Function} props.cancelButton.callback - Callback function triggered on cancel.
 * @param {boolean} [props.cancelButton.disabled] - Whether the cancel button is disabled.
 * @param {'base' | 'lg' | 'xl'} [props.size='base'] - The size of the modal.
 * @param {string} props.classHeader - Class header.
 * @param {Function} [props.handleCloseIcon] - Handle close icon close
 * @param {boolean} [props.isHandleOverlayClick] - Is handle overlay click outside modal
 * @param {boolean} [props.isHandleCloseIcon] - Show close icon in modal header
 *
 * @returns {ReactNode} The rendered Modal component.
 */
export const Modal = forwardRef(function ({ header, subHeader, children, confirmButton, cancelButton, size = 'base', handleCloseIcon, }, ref) {
    const [isOpen, setIsOpen] = useState(false);
    const handlerClose = (callback) => {
        callback((closeAction) => {
            setIsOpen(false);
            setTimeout(closeAction, 200);
        });
    };
    const handlerOverlayClick = (event) => {
        if (event.target === event.currentTarget) {
            handlerClose(handleCloseIcon);
        }
    };
    useImperativeHandle(ref, () => ({
        handlerClose,
    }));
    useEffect(() => {
        setIsOpen(true);
    }, []);
    return (<>
      <div className="relative z-50">
        <div className={clsx('bg-gray-1 bg-opacity-75 pointer-events-none fixed inset-0 transition-opacity', !isOpen ? enteringClasses : leavingClasses)}/>

        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
          <div onClick={(e) => handlerOverlayClick(e)} className="flex min-h-full items-end justify-center px-8 py-4 sm:items-center">
            <div className={clsx('relative transform rounded-lg bg-white text-center shadow-xl transition-all sm:my-8 sm:w-full sm:text-left', {
            'sm:max-w-lg': size === 'base',
            'sm:max-w-3xl': size === 'lg',
            'sm:max-w-5xl': size === 'xl',
        }, !isOpen
            ? `${enteringClasses} pointer-events-none translate-y-4 sm:translate-y-0 sm:scale-95`
            : `translate-y-0 sm:scale-100`)}>
              <div className="bg-gray-6 flex justify-between rounded-t-lg px-6 py-4">
                <div>
                  <Paragraph size="subtitle-1">{header}</Paragraph>
                  {!!subHeader && (<Paragraph className="mt-1" size="body-2">
                      {subHeader}
                    </Paragraph>)}
                </div>
                <IoCloseSharp size={20} className="pa-2 cursor-pointer" onClick={() => handlerClose(handleCloseIcon)}/>
              </div>
              <div className={clsx('px-6', cancelButton || confirmButton ? 'pt-8 pb-4' : 'py-8')}>
                {children}
              </div>
              {!!(cancelButton || confirmButton) && (<div className="flex flex-col-reverse justify-end gap-2 px-6 py-4 sm:flex-row">
                  {!!cancelButton && (<Button modifier="text" onClick={() => handlerClose(cancelButton.callback)} disabled={cancelButton.disabled}>
                      {cancelButton.text}
                    </Button>)}
                  {!!confirmButton && (<Button onClick={() => handlerClose(confirmButton.callback)} disabled={confirmButton.disabled}>
                      {confirmButton.text}
                    </Button>)}
                </div>)}
            </div>
          </div>
        </div>
      </div>
    </>);
});
Modal.displayName = 'Modal';
//# sourceMappingURL=Modal.jsx.map