'use client';
import clsx from 'clsx';
import { useEffect, useState } from 'react';
import { IoCloseSharp } from 'react-icons/io5';
import { Button, Heading, Paragraph } from '../../01-atoms';
import { TabList } from '../../02-molecules/Tab/TabList';
const enteringClasses = 'ease-out duration-300 opacity-0';
const leavingClasses = 'ease-in duration-200 opacity-100';
/**
 * ModalMultiple component for rendering a modal with multiple tabs.
 *
 * @example
 * // Example usage of ModalMultiple component
 * <ModalMultiple
 *   title="Example Modal"
 *   tabList={{
 *     list: [
 *       {
 *         title: 'Tab 1',
 *         children: <div>Content for Tab 1</div>,
 *         confirmButton: {
 *           text: 'Confirm',
 *           callback: () => console.log('Confirmed Tab 1'),
 *         },
 *         cancelButton: {
 *           text: 'Cancel',
 *           callback: () => console.log('Cancelled Tab 1'),
 *         },
 *       },
 *       {
 *         title: 'Tab 2',
 *         children: <div>Content for Tab 2</div>,
 *         confirmButton: {
 *           text: 'Confirm',
 *           callback: () => console.log('Confirmed Tab 2'),
 *         },
 *         cancelButton: {
 *           text: 'Cancel',
 *           callback: () => console.log('Cancelled Tab 2'),
 *         },
 *       },
 *     ],
 *   }}
 *   size="lg"
 *   handleCloseIcon={() => console.log('Modal closed')}
 *   onChangeTab={(index) => console.log(`Tab changed to ${index}`)}
 * />
 *
 * @param {Object} props - The properties of the ModalMultiple component.
 * @param {string} props.title - The title of the modal.
 * @param {Object} props.tabList - The tab list configuration.
 * @param {Array<Object>} props.tabList.list - The list of tabs.
 * @param {Object} [props.tabList.list.confirmButton] - The confirm button configuration for each tab.
 * @param {Object} [props.tabList.list.cancelButton] - The cancel button configuration for each tab.
 * @param {string} [props.size] - The size of the modal ('base', 'lg', 'xl').
 * @param {Function} props.handleCloseIcon - The callback function for the close icon.
 * @param {Function} [props.onChangeTab] - Optional callback function triggered when a tab is changed.
 *
 * @returns {ReactNode} The rendered ModalMultiple component.
 */
export function ModalMultiple({ size, title, tabList, handleCloseIcon, onChangeTab, subHeader, ...props }) {
    const [isOpen, setIsOpen] = useState(false);
    const [activeTab, setActiveTab] = useState(0);
    const { confirmButton, cancelButton } = tabList.list[activeTab];
    const handlerClose = (callback) => {
        callback((closeAction) => {
            setIsOpen(false);
            setTimeout(closeAction, 200);
        });
    };
    const handlerOverlayClick = (event) => {
        if (event.target === event.currentTarget) {
            handlerClose(handleCloseIcon);
        }
    };
    useEffect(() => {
        setIsOpen(true);
    }, []);
    return (<>
      {<div className="relative z-10" {...props}>
          <div className={clsx('bg-gray-1/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={handlerOverlayClick} 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`
                : `${leavingClasses} translate-y-0 sm:scale-100`)}>
                <div className="bg-gray-6 rounded-t-lg px-4 py-4">
                  <Heading level="h7" className="flex justify-between">
                    {title}
                    <IoCloseSharp size={20} className="pa-2 cursor-pointer" onClick={() => handlerClose(handleCloseIcon)}/>
                  </Heading>
                  {!!subHeader && (<Paragraph className="mt-1" size="body-2">
                      {subHeader}
                    </Paragraph>)}
                </div>

                <TabList {...tabList} callback={(index) => {
                setActiveTab(index);
                onChangeTab?.(index);
            }} listProps={{
                className: clsx('px-4', tabList.listProps?.className),
            }} contentProps={{
                className: clsx('p-4', tabList.contentProps?.className),
            }} modifier="second"/>

                <div className="flex flex-col-reverse justify-end gap-2 px-6 pb-4 sm:flex-row">
                  {!!cancelButton && (<Button modifier="text" onClick={() => handlerClose(cancelButton.callback)} disabled={cancelButton.disabled} iconL={cancelButton.iconL} iconR={cancelButton.iconR}>
                      {cancelButton.text}
                    </Button>)}
                  {!!confirmButton && (<Button onClick={() => handlerClose(confirmButton.callback)} disabled={confirmButton.disabled} iconL={confirmButton.iconL} iconR={confirmButton.iconR}>
                      {confirmButton.text}
                    </Button>)}
                </div>
              </div>
            </div>
          </div>
        </div>}
    </>);
}
//# sourceMappingURL=ModalMultiple.jsx.map