"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXModal = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_2 = require("@headlessui/react");
const Card_1 = require("../Card");
const types_1 = require("../types");
const Button_1 = require("../Button");
const solid_1 = require("@heroicons/react/24/solid");
const icons_1 = require("../../assets/icons");
const image_1 = tslib_1.__importDefault(require("next/image"));
var MODAL_THEME;
(function (MODAL_THEME) {
    MODAL_THEME["WHITE"] = "WHITE";
    MODAL_THEME["GRAY"] = "GRAY";
})(MODAL_THEME || (MODAL_THEME = {}));
const PHXModal = ({ show, title, className, primaryActionText = 'Xác nhận', secondaryActionText = 'Đóng', dangerActionText, children, primaryLoading, size = 'small', dangerLoading, footerBulkAction, downloadLinkRef, downloadText, primarySubmit, dangerSubmit, hiddenSubmit, hrefLink, isCancel = false, closeButton, isHeaderDownload, noOverlay = false, headerContent, onHide, onSubmit, onPrimaryClick, onDangerClick, onCancel, onHeaderAction, type = 'default', customWidth, inCard = true, disableCloseButton = false, leftActionText, disableLeftAction = false, loadingLeftAction = false, onLeftActionText, disableSubmit = false, dowloadIcon = false, hiddenCloseButton = false, disableOutsideClick, customFooter, customHeight, headerClassName = '', theme = MODAL_THEME.WHITE, }) => {
    const [open, setOpen] = (0, react_1.useState)(false);
    const headerText = headerContent ? headerContent : '';
    const sizeModal = (0, types_1.classNames)(size === 'small' && 'sm:max-w-lg', size === 'medium' && 'sm:max-w-xl', size === 'large' && 'sm:max-w-2xl', size === 'large-plus' && 'sm:max-w-2xl lg:max-w-4xl', size === 'extra-large' && 'w-[90vw] max-w-[95vw] sm:max-w-3xl md:max-w-4xl lg:max-w-5xl xl:max-w-7xl');
    (0, react_1.useEffect)(() => {
        // @ts-ignore
        setOpen(show);
    }, [show]);
    const handleClickCloseAction = () => {
        if (disableCloseButton)
            return; // Không cho phép đóng modal khi loading submit
        if (onHeaderAction) {
            onHeaderAction();
        }
        else {
            setOpen(false);
            if (onHide) {
                onHide();
            }
        }
    };
    const onClose = () => {
        if (disableCloseButton)
            return; // Không cho phép đóng modal khi loading submit
        setOpen(false);
        if (onHide) {
            onHide();
        }
    };
    const Card = () => (react_1.default.createElement(Card_1.PHXCard, { footerBulkAction: footerBulkAction, dowloadIcon: dowloadIcon, primaryHeader: true, title: title, headerAction: { content: closeButton ? 'close' : headerText, onClick: handleClickCloseAction }, secondaryFooterActions: !hiddenCloseButton ? [{ content: secondaryActionText, onClick: onClose }] : undefined, type: 'modal', downloadLinkRef: downloadLinkRef, downloadText: downloadText, fullSize: type === 'no-padding', hrefLink: hrefLink, primaryFooterAction: !hiddenSubmit
            ? {
                content: primaryActionText,
                loading: primaryLoading,
                onClick: onPrimaryClick,
                submit: primarySubmit,
                disabled: disableSubmit,
            }
            : {}, dangerFooterAction: {
            content: dangerActionText,
            loading: dangerLoading,
            onClick: onDangerClick,
            submit: dangerSubmit,
            disabled: disableSubmit,
        }, isHeaderDownload: isHeaderDownload },
        react_1.default.createElement("div", { className: type !== 'no-padding' ? '-mt-1' : '' }, children)));
    return (react_1.default.createElement(react_2.Transition.Root, { as: react_1.Fragment, show: open },
        react_1.default.createElement(react_2.Dialog, { as: 'div', className: 'relative z-50', onClose: () => {
                // Chỉ tắt modal này
                if (disableOutsideClick)
                    return;
                if (!disableCloseButton)
                    setOpen(false);
                onHide === null || onHide === void 0 ? void 0 : onHide();
            }, static: true },
            !noOverlay && (react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-100 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10' },
                react_1.default.createElement("div", { className: 'fixed inset-0 z-40 transition-opacity bg-gray-500 bg-opacity-75' }))),
            react_1.default.createElement("div", { className: `fixed inset-0 z-50 overflow-y-auto ${className || ''}` },
                react_1.default.createElement("div", { className: 'flex items-center justify-center min-h-full p-4 text-center sm:items-center sm:p-0' },
                    react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-100 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10' },
                        react_1.default.createElement("div", { className: (0, types_1.classNames)('min-w-0 flex-1', customWidth ? customWidth : sizeModal) },
                            react_1.default.createElement(react_2.Dialog.Panel, { className: (0, types_1.classNames)('shadow-xl relative transform rounded-lg text-left transition-all sm:my-24 sm:w-full', theme === MODAL_THEME.GRAY ? 'bg-[#F1F1F1]' : 'bg-white') }, inCard ? (primarySubmit || dangerSubmit ? (react_1.default.createElement("form", { onSubmit: onSubmit },
                                react_1.default.createElement(Card, null))) : (react_1.default.createElement(Card, null))) : (react_1.default.createElement("div", null,
                                react_1.default.createElement("div", { className: (0, types_1.classNames)('flex items-center justify-between rounded-t-lg border-b border-gray-200  p-4 text-sm font-semibold text-gray-900', headerClassName, theme === MODAL_THEME.GRAY ? 'bg-[#F1F1F1]' : 'bg-[#F3F3F3]') },
                                    react_1.default.createElement("div", { className: 'flex items-center gap-1' },
                                        isCancel && (react_1.default.createElement("button", { className: 'inline-flex items-center px-2 py-1 text-xs font-bold text-gray-700 bg-transparent rounded-lg hover:bg-gray-200', onClick: onCancel, type: 'button' },
                                            react_1.default.createElement(solid_1.ArrowLeftIcon, { className: 'w-4 h-4' }))),
                                        title)),
                                react_1.default.createElement("div", { style: { maxHeight: customHeight || '100%' }, className: type === 'default' ? 'p-3 text-xs text-gray-500' : '' }, children),
                                react_1.default.createElement("div", { className: (0, types_1.classNames)('flex items-center justify-between gap-x-3 rounded-b-lg border-t border-gray-200 ', theme === MODAL_THEME.GRAY ? 'bg-[#F1F1F1]' : 'bg-white') }, customFooter ? (customFooter) : (react_1.default.createElement(react_1.default.Fragment, null,
                                    react_1.default.createElement("div", { className: 'flex items-center p-4 pl-5 rounded-t-lg gap-x-3' },
                                        downloadLinkRef && hrefLink && downloadText && (react_1.default.createElement("div", { className: 'flex items-center gap-x-0.5' },
                                            dowloadIcon && (react_1.default.createElement(image_1.default, { alt: '', height: 15, 
                                                // @ts-ignore
                                                src: icons_1.PHXIcons.DownloadIcon, width: 15 })),
                                            react_1.default.createElement("a", { ref: downloadLinkRef, className: 'text-sm active:text-link-600 hover:text-link-600 text-link-500 hover:underline', href: hrefLink }, downloadText))),
                                        leftActionText && (react_1.default.createElement("div", { className: 'flex gap-2' },
                                            react_1.default.createElement(Button_1.PHXButton, { className: 'text-sm !text-link-500 !px-0', disabled: disableLeftAction, onClick: onLeftActionText, plain: true }, leftActionText),
                                            loadingLeftAction && react_1.default.createElement(Button_1.PHXButton, { disabled: true, loading: true, plain: true, size: 'micro' }))),
                                        footerBulkAction && footerBulkAction.content && (react_1.default.createElement(Button_1.PHXButton, { danger: true, disabled: footerBulkAction.disabled, loading: footerBulkAction.loading, onClick: footerBulkAction.onClick, size: 'micro', submit: !!footerBulkAction.submit }, footerBulkAction.content))),
                                    react_1.default.createElement("div", { className: 'flex justify-end p-4 rounded-t-lg gap-x-3' },
                                        react_1.default.createElement(Button_1.PHXButton, { disabled: disableCloseButton, onClick: onHide, secondary: true, size: 'micro' }, secondaryActionText),
                                        dangerSubmit && (react_1.default.createElement(Button_1.PHXButton, { danger: true, disabled: disableSubmit, loading: dangerLoading, onClick: onDangerClick, size: 'micro' }, dangerActionText)),
                                        !hiddenSubmit && (react_1.default.createElement(Button_1.PHXButton, { disabled: disableSubmit, loading: primaryLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), primary: true, size: 'micro' }, primaryActionText))))))))))))))));
};
exports.PHXModal = PHXModal;
//# sourceMappingURL=Modal.js.map