"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXFormWrap = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Button_1 = require("../Button");
const types_1 = require("../types");
const solid_1 = require("@heroicons/react/20/solid");
const Badge_1 = require("../Badge");
const Modal_1 = require("../Modal");
const ModalImport_1 = tslib_1.__importDefault(require("./ModalImport"));
const Breadcrumb_1 = require("../Breadcrumb");
const PHXFormWrap = ({ isExport, exportText, onExport, badge, cancelText, children, contentOfModal, className, deleted, secondaryLeftButton, secondaryLeftButtonSubmit, secondaryLeftTextButton, deletedLoading, footerAction = true, headerAction = true, disableHeaderAction = false, headerActionText, headerActionType = 'custom', loading, method, nameOfModal, onSecondary, onCancel, onDelete, onSubmit, onImport, onDanger, onChangeCapture, onHeaderActionClick, onSubmitSecondaryLeftButton, onDeletedSecondaryLeftButton, onlyDelete, size = 'large', formType, submit, submitText, title, type = 'default', backAction = true, breadcrumbItems = [], disableSubmit = false, deletedText = 'Xoá bản ghi', dangerText, showDangerButton, hideCancelButton, multiBadge, }) => {
    const sizeClassName = (0, types_1.classNames)(size === 'small' && 'mx-auto md:w-5/6 xl:w-1/2', size === 'medium' && 'mx-auto md:w-5/6 lg:w-3/4', size === 'large' && 'mx-auto md:w-md lg:w-11/12');
    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
    const [openImport, setOpenImport] = (0, react_1.useState)(false);
    const hasBreadcrumb = breadcrumbItems.length > 0;
    const shouldShowBackAction = backAction;
    const handleDelete = () => {
        if (onDelete) {
            onDelete();
        }
        else {
            return;
        }
    };
    const handleHeaderAction = () => {
        if (headerActionType === 'import') {
            setOpenImport(true);
        }
        else {
            if (onHeaderActionClick) {
                onHeaderActionClick();
            }
        }
    };
    (0, react_1.useEffect)(() => {
        setIsModalOpen(deletedLoading);
    }, [deletedLoading]);
    return (react_1.default.createElement("div", { className: className },
        react_1.default.createElement("form", { method: method, onSubmit: onSubmit },
            react_1.default.createElement("div", { className: sizeClassName },
                headerAction && (react_1.default.createElement("div", { className: 'mb-4' },
                    hasBreadcrumb && (react_1.default.createElement("div", { className: 'mb-1' },
                        react_1.default.createElement(Breadcrumb_1.PHXBreadcrumb, { items: breadcrumbItems }))),
                    react_1.default.createElement("div", { className: 'flex items-center justify-between' },
                        react_1.default.createElement("div", { className: 'flex items-center truncate' },
                            shouldShowBackAction && (react_1.default.createElement("button", { className: 'inline-flex items-center rounded-lg border-gray-300 bg-transparent px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200 active:bg-gray-300 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', onClick: onCancel, type: 'button' },
                                react_1.default.createElement(solid_1.ArrowLeftIcon, { className: 'h-5 w-5' }))),
                            react_1.default.createElement("div", { className: (0, types_1.classNames)('min-w-0', type === 'default' || type === 'breadcrumb' ? 'flex-1' : 'sm:flex', shouldShowBackAction ? 'ml-2' : '') },
                                react_1.default.createElement("h2", { className: (0, types_1.classNames)('sm:text-md truncate text-lg font-medium leading-6 text-gray-900 sm:tracking-tight', type === 'default' ? '' : 'mr-2 flex-1') }, title),
                                type === 'title-with-badge' && (react_1.default.createElement("div", { className: 'sm:flex gap-x-2 hidden' },
                                    badge && (react_1.default.createElement("div", { className: 'mt-1 flex items-center sm:mt-0' },
                                        react_1.default.createElement(Badge_1.PHXBadge, { text: badge.badgeText, type: badge.badgeType }))),
                                    multiBadge && (react_1.default.createElement(react_1.default.Fragment, null, multiBadge.map((item, index) => (react_1.default.createElement("div", { className: 'mt-1 flex items-center sm:mt-0', key: index },
                                        react_1.default.createElement(Badge_1.PHXBadge, { text: item.text, type: item.type })))))))))),
                        (exportText || headerActionText) && (react_1.default.createElement("div", { className: 'flex items-center' },
                            isExport && exportText && (react_1.default.createElement("div", { className: (0, types_1.classNames)(headerActionText ? 'mr-2' : '') },
                                react_1.default.createElement(Button_1.PHXButton, { onClick: onExport, secondary: true, size: 'small' }, exportText))),
                            headerActionText && (react_1.default.createElement("div", null,
                                react_1.default.createElement(Button_1.PHXButton, { onClick: handleHeaderAction, primary: true, size: 'small', disabled: disableHeaderAction }, headerActionText)))))),
                    type === 'title-with-badge' && (react_1.default.createElement("div", { className: 'flex sm:hidden gap-x-2' },
                        badge && (react_1.default.createElement("div", { className: 'mt-1 flex items-center sm:mt-0' },
                            react_1.default.createElement(Badge_1.PHXBadge, { text: badge.badgeText, type: badge.badgeType }))),
                        multiBadge && (react_1.default.createElement(react_1.default.Fragment, null, multiBadge.map((item, index) => (react_1.default.createElement("div", { className: 'mt-1 flex items-center sm:mt-0', key: index },
                            react_1.default.createElement(Badge_1.PHXBadge, { text: item.text, type: item.type })))))))))),
                children,
                react_1.default.createElement("div", { className: footerAction
                        ? (0, types_1.classNames)(deleted || secondaryLeftButton ? 'justify-between' : 'justify-end gap-x-3', 'mt-6 flex items-center pt-6')
                        : 'hidden' },
                    deleted && (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(Button_1.PHXButton, { danger: true, size: 'small', onClick: () => setIsModalOpen(true) }, deletedText),
                        react_1.default.createElement(Modal_1.PHXModal, { dangerActionText: 'X\u00E1c nh\u1EADn x\u00F3a', dangerLoading: deletedLoading, onDangerClick: handleDelete, primaryActionText: '', onHide: () => setIsModalOpen(false), show: isModalOpen === true, title: `Xoá ${nameOfModal}?` },
                            react_1.default.createElement("div", { className: 'sm:flex sm:items-start' },
                                react_1.default.createElement("p", { className: 'text-xs text-gray-600' }, contentOfModal ? (contentOfModal) : (react_1.default.createElement(react_1.default.Fragment, null,
                                    "B\u1EA1n c\u00F3 ch\u1EAFc ch\u1EAFn mu\u1ED1n x\u00F3a b\u1EA3n ghi ",
                                    react_1.default.createElement("span", { className: 'font-semibold' }, nameOfModal),
                                    "? Thao t\u00E1c n\u00E0y kh\u00F4ng th\u1EC3 ho\u00E0n t\u00E1c."))))))),
                    secondaryLeftButton && (react_1.default.createElement("div", { className: 'flex justify-end gap-x-3' }, secondaryLeftButtonSubmit ? (react_1.default.createElement(Button_1.PHXButton, { size: 'small', loading: loading, onClick: onSubmitSecondaryLeftButton, primary: true }, secondaryLeftTextButton)) : (react_1.default.createElement(Button_1.PHXButton, { danger: true, size: 'small', onClick: onDeletedSecondaryLeftButton }, secondaryLeftTextButton)))),
                    !onlyDelete && (react_1.default.createElement("div", { className: 'flex justify-end gap-x-3' },
                        !hideCancelButton && (react_1.default.createElement(Button_1.PHXButton, { size: 'small', secondary: true, onClick: onSecondary ? onSecondary : onCancel }, formType === 'custom' ? cancelText : 'Huỷ thay đổi')),
                        showDangerButton && (react_1.default.createElement(Button_1.PHXButton, { size: 'small', danger: true, onClick: onDanger, loading: loading, disabled: disableSubmit }, dangerText !== null && dangerText !== void 0 ? dangerText : (formType === 'custom' ? 'Từ chối' : dangerText || 'Từ chối'))),
                        submit ? (react_1.default.createElement(Button_1.PHXButton, { disabled: disableSubmit, size: 'small', loading: loading, submit: true, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật')) : (react_1.default.createElement(Button_1.PHXButton, { disabled: disableSubmit, size: 'small', loading: loading, onClick: onSubmit, primary: true }, formType === 'custom' ? submitText : formType === 'add' ? 'Thêm mới' : 'Cập nhật'))))))),
        react_1.default.createElement(ModalImport_1.default, { show: openImport, onHide: () => setOpenImport(false), handleImport: onImport, onChangeCapture: onChangeCapture })));
};
exports.PHXFormWrap = PHXFormWrap;
//# sourceMappingURL=FormWrap.js.map