"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXCard = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Section_1 = tslib_1.__importDefault(require("./Section"));
const WrapSection_1 = tslib_1.__importDefault(require("./WrapSection"));
const Footer_1 = tslib_1.__importDefault(require("./Footer"));
const types_1 = require("../types");
const Button_1 = require("../Button");
const solid_1 = require("@heroicons/react/24/solid");
const outline_1 = require("@heroicons/react/24/outline");
const react_2 = require("@headlessui/react");
const Badge_1 = require("../Badge");
const Loading_1 = require("../Loading");
const BannerWithCard_1 = require("../BannerWithCard/BannerWithCard");
const PHXCard = function Card({ children, title, primaryFooterAction, primaryHeader, dropdownOnly, secondaryFooterActions, subSection, dataListLi, footerBulkAction, isUpload, dataListLiDouble, dropdown, iconDetail, isbuttonHeader, headerAction, secondaryAction, dangerFooterAction, type = 'default', isHeaderDownload = false, downloadLinkRef, hrefLink, downloadText, badgeType, badgeText, fullSize = false, cardType, componentFist, componentLast, classNameFist, classNameLast, loadingSpinner, bannerConfig, bannerPosition = 'top', subTitleConfig, dowloadIcon = false, border = true, }) {
    const footerActionMarkup = primaryFooterAction || secondaryFooterActions || dangerFooterAction ? (react_1.default.createElement("div", { className: (0, types_1.classNames)(downloadLinkRef && hrefLink && downloadText ? 'flex items-center justify-between gap-x-3' : 'justify-end') },
        react_1.default.createElement("div", { className: (0, types_1.classNames)(downloadLinkRef && hrefLink && downloadText ? 'pl-5' : 'hidden') }, downloadLinkRef && hrefLink && downloadText && (react_1.default.createElement("div", { className: 'flex gap-x-0.5' },
            dowloadIcon && (react_1.default.createElement("img", { src: 'https://sisv2-cdn.phx-smartschool.com/store/product/5-26-2025/dd47876a-398f-4f00-852b-ce6882925825-download-icon.png', alt: '', className: 'h-5 w-5' })),
            react_1.default.createElement("a", { ref: downloadLinkRef, className: 'text-sm text-[#005BD3] hover:text-[#004299] hover:underline', href: hrefLink }, downloadText)))),
        react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'p-4' : 'p-4 pt-2', 'flex items-center justify-between gap-x-3') },
            react_1.default.createElement("div", null, 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 gap-x-3' },
                secondaryFooterActions && secondaryFooterActions.length === 1 && secondaryFooterActions[0].content && (react_1.default.createElement(Button_1.PHXButton, { secondary: true, size: 'micro', onClick: secondaryFooterActions[0].onClick }, secondaryFooterActions[0].content)),
                dangerFooterAction && dangerFooterAction.content && (react_1.default.createElement(Button_1.PHXButton, { danger: true, submit: dangerFooterAction.submit ? true : false, size: 'micro', onClick: dangerFooterAction.onClick, loading: dangerFooterAction.loading, disabled: dangerFooterAction.disabled }, dangerFooterAction.content)),
                primaryFooterAction && primaryFooterAction.content && (react_1.default.createElement(Button_1.PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'micro', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled || primaryFooterAction.loading, loading: primaryFooterAction.loading }, primaryFooterAction.content)))))) : (react_1.default.createElement(react_1.default.Fragment, null));
    const HeaderActionMarkup = ({ title }) => {
        return primaryHeader ? (react_1.default.createElement("div", null,
            react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'rounded-t-lg bg-[#F3F3F3] p-4' : 'px-4 pt-4', 'flex flex-col items-start justify-between gap-y-2 sm:flex-row sm:items-center sm:gap-y-0', type === 'title-with-badge' && 'gap-x-1') },
                react_1.default.createElement("span", { className: (0, types_1.classNames)('text-sm font-semibold leading-5 text-gray-900', type === 'title-with-badge' && 'flex-1 truncate') }, title),
                react_1.default.createElement("div", { className: 'flex items-baseline gap-x-3' },
                    (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.content) && (react_1.default.createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: secondaryAction.onClick }, secondaryAction.content)),
                    headerAction &&
                        (isHeaderDownload ? (react_1.default.createElement(Button_1.PHXButton, { onClick: headerAction.onClick, soft: true, size: 'small' }, headerAction.content)) : (react_1.default.createElement(react_1.default.Fragment, null,
                            headerAction.content && !dropdown && !isbuttonHeader && !isUpload ? (react_1.default.createElement(react_1.default.Fragment, null, headerAction.content === 'close' ? (react_1.default.createElement("button", { type: 'button', className: `grid grid-cols-1 rounded-md p-0.5 text-gray-400 ${type === 'modal' ? 'hover:bg-gray-200 hover:text-gray-500' : 'bg-white hover:bg-gray-100'}`, onClick: headerAction.onClick },
                                react_1.default.createElement(react_1.default.Fragment, null,
                                    react_1.default.createElement("span", { className: 'sr-only' }, "Close"),
                                    react_1.default.createElement(solid_1.XMarkIcon, { className: 'h-5 w-5', "aria-hidden": 'true' })))) : (react_1.default.createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: headerAction.onClick }, headerAction.content)))) : null,
                            headerAction.content && isbuttonHeader ? (react_1.default.createElement("button", { onClick: headerAction.onClick, className: 'flex items-center rounded-lg border bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm hover:bg-slate-50 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
                                iconDetail && react_1.default.createElement(outline_1.DocumentMagnifyingGlassIcon, { className: 'h-4 w-4' }),
                                isUpload && react_1.default.createElement(solid_1.ArrowUpTrayIcon, { className: 'h-4 w-4' }))) : null,
                            dropdown && (react_1.default.createElement(react_1.default.Fragment, null,
                                !dropdownOnly && !(secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.content) && (react_1.default.createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: headerAction.onClick }, headerAction.content)),
                                react_1.default.createElement(react_2.Menu, { as: 'div', className: 'relative inline-block text-left' },
                                    react_1.default.createElement("div", null,
                                        react_1.default.createElement(react_2.Menu.Button, { className: 'p-0' },
                                            react_1.default.createElement("div", { className: 'flex items-center text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline' },
                                                react_1.default.createElement("p", null, dropdown.title),
                                                react_1.default.createElement(solid_1.ChevronDownIcon, { className: 'ml-1 h-[13px] w-[13px]' })))),
                                    react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
                                        react_1.default.createElement(react_2.Menu.Items, { className: (0, types_1.classNames)('absolute right-0 z-10 mt-1.5 max-h-96 min-w-[5.2rem] overflow-y-auto whitespace-nowrap rounded-lg border bg-white px-2 py-1 shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none') },
                                            react_1.default.createElement(react_1.default.Fragment, null,
                                                react_1.default.createElement("div", { className: 'py-1' }, dropdown.data.map((item) => (react_1.default.createElement(react_2.Menu.Item, { key: item.content }, ({ active }) => (react_1.default.createElement("div", { className: (0, types_1.classNames)(active
                                                        ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900'
                                                        : 'text-gray-700', 'block px-2 py-1.5 text-xs'), onClick: item.onClick }, item.name)))))))))))))))),
                type === 'title-with-badge' && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(Badge_1.PHXBadge, { type: badgeType, text: badgeText })))),
            subTitleConfig && (react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'rounded-t-lg bg-[#F3F3F3] p-4' : 'px-4 pt-2', `text-xs ${subTitleConfig === null || subTitleConfig === void 0 ? void 0 : subTitleConfig.className}`) }, subTitleConfig.content)))) : (react_1.default.createElement(react_1.default.Fragment, null));
    };
    const SubSectionHeader = ({ title, headerAction, secondaryAction, isNormalTitle }) => {
        var _a;
        return (title && (react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'px-5 py-3' : 'px-4', 'flex flex-col items-start justify-between gap-y-1 sm:flex-row sm:items-center') },
            react_1.default.createElement("span", { className: (0, types_1.classNames)(isNormalTitle ? 'text-xs' : 'text-sm font-semibold leading-5', 'text-gray-900', type === 'title-with-badge' && 'flex-1 truncate', (headerAction === null || headerAction === void 0 ? void 0 : headerAction.content) !== 'pencil' &&
                    (headerAction === null || headerAction === void 0 ? void 0 : headerAction.content) !== 'pencil & remove' &&
                    !isNormalTitle &&
                    'text-xs font-medium text-gray-900') }, title),
            (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.content) && (react_1.default.createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline sm:ml-auto sm:mr-3', onClick: secondaryAction.onClick }, secondaryAction.content)),
            headerAction &&
                (isHeaderDownload ? (react_1.default.createElement(Button_1.PHXButton, { onClick: headerAction.onClick, soft: true, size: 'small' }, headerAction.content)) : (react_1.default.createElement(react_1.default.Fragment, null,
                    headerAction.content !== 'pencil' && headerAction.content !== 'pencil & remove' ? (react_1.default.createElement(react_1.default.Fragment, null, headerAction.content === 'close' ? (react_1.default.createElement("button", { className: 'rounded-md bg-white p-1 text-gray-400 hover:bg-gray-100', onClick: headerAction.onClick, type: 'button' },
                        react_1.default.createElement("span", { className: 'sr-only' }, "Close"),
                        react_1.default.createElement(solid_1.XMarkIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))) : (headerAction === null || headerAction === void 0 ? void 0 : headerAction.dropdown) ? (react_1.default.createElement("div", { className: 'ml-0 sm:ml-5' },
                        react_1.default.createElement(react_2.Menu, { as: 'div', className: 'relative inline-block text-left' },
                            react_1.default.createElement("div", null,
                                react_1.default.createElement(react_2.Menu.Button, null,
                                    react_1.default.createElement("div", { className: 'flex items-center text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline' },
                                        react_1.default.createElement("p", null, headerAction.content),
                                        react_1.default.createElement(solid_1.ChevronDownIcon, { className: 'ml-1 h-[13px] w-[13px]' })))),
                            react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
                                react_1.default.createElement(react_2.Menu.Items, { className: 'absolute left-0 z-50 mt-1.5 max-h-96 min-w-[5.2rem] overflow-y-auto whitespace-nowrap rounded-lg border bg-white px-2 py-1 shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none sm:left-auto sm:right-0' },
                                    react_1.default.createElement("div", { className: 'py-1' }, (_a = headerAction === null || headerAction === void 0 ? void 0 : headerAction.dropdown) === null || _a === void 0 ? void 0 : _a.data.map((item) => (react_1.default.createElement(react_2.Menu.Item, { key: item.content }, ({ active }) => (react_1.default.createElement("div", { className: (0, types_1.classNames)(active
                                            ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900'
                                            : 'text-gray-700', 'block px-2 py-1.5 text-xs'), onClick: item.onClick }, item.name))))))))))) : (react_1.default.createElement("p", { "aria-hidden": true, className: 'text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: headerAction.onClick }, headerAction.content)))) : null,
                    headerAction.content === 'pencil' && (react_1.default.createElement("button", { className: 'rounded-md bg-white p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200', onClick: headerAction.onClick, type: 'button' },
                        react_1.default.createElement(outline_1.PencilIcon, { "aria-hidden": 'true', className: 'h-[15px] w-[15px] active:text-gray-600' }))),
                    headerAction.type === 'custom-link' && (react_1.default.createElement("button", { type: 'button', onClick: headerAction.onClick, className: 'flex items-center text-xs text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline' },
                        react_1.default.createElement("span", null, headerAction.text),
                        react_1.default.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', className: 'ml-1' },
                            react_1.default.createElement("path", { d: 'M11.7143 4C11.2409 4 10.8571 4.38376 10.8571 4.85714C10.8571 5.33053 11.2409 5.71429 11.7143 5.71429H13.0735L9.96534 8.82248C9.6306 9.15721 9.6306 9.69993 9.96534 10.0347C10.3001 10.3694 10.8428 10.3694 11.1775 10.0347L14.2857 6.92647V8.28571C14.2857 8.7591 14.6695 9.14286 15.1429 9.14286C15.6162 9.14286 16 8.7591 16 8.28571V4.85714C16 4.38376 15.6162 4 15.1429 4H11.7143Z', fill: 'currentColor' }),
                            react_1.default.createElement("path", { d: 'M15.4286 11.7143C15.4286 11.2409 15.0448 10.8571 14.5714 10.8571C14.098 10.8571 13.7143 11.2409 13.7143 11.7143V12.8571C13.7143 13.6461 13.0747 14.2857 12.2857 14.2857H7.14286C6.35388 14.2857 5.71429 13.6461 5.71429 12.8571L5.71429 7.71428C5.71429 6.92531 6.35388 6.28571 7.14286 6.28571L8.28571 6.28571C8.7591 6.28571 9.14286 5.90196 9.14286 5.42857C9.14286 4.95518 8.7591 4.57143 8.28571 4.57143L7.14286 4.57143C5.40711 4.57143 4 5.97853 4 7.71428V12.8571C4 14.5929 5.40711 16 7.14286 16H12.2857C14.0215 16 15.4286 14.5929 15.4286 12.8571V11.7143Z', fill: 'currentColor' })))),
                    headerAction.content === 'pencil & remove' && (react_1.default.createElement("div", { className: 'flex' },
                        react_1.default.createElement("button", { className: 'rounded-md bg-white p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200', onClick: headerAction.onDelete, type: 'button' },
                            react_1.default.createElement(outline_1.TrashIcon, { "aria-hidden": 'true', className: 'h-4 w-4 text-red-800 active:text-red-900' })),
                        react_1.default.createElement("button", { className: 'ml-2 rounded-md bg-white p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200', onClick: headerAction.onClick, type: 'button' },
                            react_1.default.createElement(outline_1.PencilIcon, { "aria-hidden": 'true', className: 'h-[15px] w-[15px] active:text-gray-600' }))))))))));
    };
    return (react_1.default.createElement(react_1.default.Fragment, null, cardType === 'card-component' ? (react_1.default.createElement("div", { className: 'w-full' },
        react_1.default.createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
            react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'divide-y divide-gray-200' : '', 'rounded-lg  bg-white ', border &&
                    'shadow-[0rem_.3125rem_.3125rem_-.15625rem_rgba(0,0,0,.03),0rem_.1875rem_.1875rem_-.09375rem_rgba(0,0,0,.02),0rem_.125rem_.125rem_-.0625rem_rgba(0,0,0,.02),0rem_.0625rem_.0625rem_-.03125rem_rgba(0,0,0,.03),0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,.04),0rem_0rem_0rem_.0625rem_rgba(0,0,0,.06)]') },
                react_1.default.createElement("div", { className: 'flex items-center justify-between px-4 pt-4' },
                    react_1.default.createElement("span", { className: (0, types_1.classNames)('flex-1 truncate text-sm font-semibold leading-5 text-gray-900') }, title),
                    react_1.default.createElement("div", null, loadingSpinner ? react_1.default.createElement(Loading_1.PHXSpinner, { className: 'mr-4 flex h-5 w-5 items-center justify-center' }) : ''),
                    react_1.default.createElement("div", { className: classNameFist }, componentFist),
                    react_1.default.createElement("div", { className: classNameLast }, componentLast)),
                subSection
                    ? subSection.map((item, index) => (react_1.default.createElement("div", { key: index, className: (0, types_1.classNames)(title ? 'py-2' : 'py-2', index === subSection.length - 1 && 'pb-0', index === 0 && !title && 'pt-4') },
                        react_1.default.createElement(SubSectionHeader, { headerAction: item.headerAction, index: index, secondaryAction: item.secondaryAction, title: item.title, isNormalTitle: item.isNormalTitle }),
                        item.component && (react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'px-5 py-3' : 'px-4 py-2', index < subSection.length - 1 ? 'pb-0' : 'pb-4') }, item.component)))))
                    : null,
                dataListLi && (react_1.default.createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLi.map((item, index) => (react_1.default.createElement("li", { key: index, className: 'mb-[6px]' }, item.name))))),
                children ? (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement("div", { className: (0, types_1.classNames)(!fullSize ? 'p-4' : '', primaryHeader && type !== 'modal' ? 'pt-2' : fullSize ? '' : 'pt-4') },
                        bannerPosition === 'top' && react_1.default.createElement(BannerWithCard_1.PHXBannerWithCard, { ...bannerConfig }),
                        children,
                        bannerPosition === 'bottom' && react_1.default.createElement(BannerWithCard_1.PHXBannerWithCard, { ...bannerConfig })))) : null,
                footerActionMarkup)))) : (react_1.default.createElement("div", { className: 'w-full' }, dataListLiDouble ? (react_1.default.createElement("div", { className: 'rounded-lg shadow-[0rem_0.0625rem_0rem_#1a1a1a12]' },
        react_1.default.createElement("div", { className: 'rounded-t-lg border border-b-0 border-gray-200 bg-white' }, dataListLiDouble && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(HeaderActionMarkup, { title: dataListLiDouble.top.title }),
            react_1.default.createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLiDouble.top.data.map((item, index) => (react_1.default.createElement("li", { key: index, className: 'mb-[6px]' }, item.name))))))),
        react_1.default.createElement("div", { className: 'rounded-b-lg border border-t-0 border-gray-200 bg-gray-100' }, dataListLiDouble && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(HeaderActionMarkup, { title: dataListLiDouble.bottom.title }),
            react_1.default.createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLiDouble.bottom.data.map((item, index) => (react_1.default.createElement("li", { key: index, className: 'mb-[6px]' }, item.name))))))))) : (
    // <div className='mx-auto max-w-3xl px-0 lg:max-w-full'>
    react_1.default.createElement("div", null,
        react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'divide-y divide-gray-200' : '', 'rounded-lg bg-white', border &&
                'shadow-[0rem_.3125rem_.3125rem_-.15625rem_rgba(0,0,0,.03),0rem_.1875rem_.1875rem_-.09375rem_rgba(0,0,0,.02),0rem_.125rem_.125rem_-.0625rem_rgba(0,0,0,.02),0rem_.0625rem_.0625rem_-.03125rem_rgba(0,0,0,.03),0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,.04),0rem_0rem_0rem_.0625rem_rgba(0,0,0,.06)]') },
            title && react_1.default.createElement(HeaderActionMarkup, { title: title }),
            subSection
                ? subSection.map((item, index) => (react_1.default.createElement("div", { key: index, className: (0, types_1.classNames)(title ? 'py-2' : 'py-2', index === subSection.length - 1 && 'pb-0', index === 0 && !title && 'pt-4') },
                    react_1.default.createElement(SubSectionHeader, { title: item.title, headerAction: item.headerAction, index: index, secondaryAction: item.secondaryAction, isNormalTitle: item.isNormalTitle }),
                    item.component && (react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'modal' ? 'px-5 py-3' : 'px-4 py-2', index < subSection.length - 1 ? 'pb-0' : 'pb-4') }, item.component)))))
                : null,
            dataListLi && (react_1.default.createElement("div", { className: 'px-6 pb-4 pt-3 text-xs' }, dataListLi.map((item, index) => (react_1.default.createElement("li", { key: index, className: 'mb-[6px]' }, item.name))))),
            children ? (react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement("div", { className: (0, types_1.classNames)(!fullSize ? 'p-4' : '', primaryHeader && type !== 'modal' ? 'pt-2' : fullSize ? '' : 'pt-4') },
                    bannerPosition === 'top' && react_1.default.createElement(BannerWithCard_1.PHXBannerWithCard, { ...bannerConfig }),
                    children,
                    bannerPosition === 'bottom' && react_1.default.createElement(BannerWithCard_1.PHXBannerWithCard, { ...bannerConfig })))) : null,
            footerActionMarkup)))))));
};
exports.PHXCard = PHXCard;
exports.PHXCard.Section = Section_1.default;
exports.PHXCard.WrapSection = WrapSection_1.default;
exports.PHXCard.Footer = Footer_1.default;
//# sourceMappingURL=Card.js.map