"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_2 = require("react");
const react_3 = require("@headlessui/react");
const outline_1 = require("@heroicons/react/24/outline");
const types_1 = require("../types");
const icon_1 = require("../../assets/icon");
const image_1 = tslib_1.__importDefault(require("next/image"));
function SelectedAction({ selectedBtn, selectedPeople, slectedTitle = 'bản ghi', toggleAll, }) {
    const [isActionOver, setIsActionOver] = (0, react_1.useState)({
        index: 0,
        isOver: false,
    });
    const iconAction = (icon) => {
        switch (icon) {
            case 'check-circle':
                return {
                    icon: icon_1.PHXIcons.TABLE_CHECK_CIRCLE,
                    icon_hover: icon_1.PHXIcons.TABLE_CHECK_CIRCLE_HOVER,
                    icon_mobile: icon_1.PHXIcons.TABLE_CHECK_CIRCLE_MOBILE,
                };
            case 'close-circle':
                return {
                    icon: icon_1.PHXIcons.TABBLE_CLOSE_CIRCLE,
                    icon_hover: icon_1.PHXIcons.TABLE_CLOSE_CIRCLE_HOVER,
                    icon_mobile: icon_1.PHXIcons.TABLE_CLOSE_CIRCLE_MOBILE,
                };
            case 'open-eye':
                return {
                    icon: icon_1.PHXIcons.TABLE_OPEN_EYE_ICON,
                    icon_hover: icon_1.PHXIcons.TABLE_OPEN_EYE_HOVER,
                    icon_mobile: icon_1.PHXIcons.TABLE_OPEN_EYE_MOBILE,
                };
            case 'close-eye':
                return {
                    icon: icon_1.PHXIcons.TABLE_CLOSE_EYE_ICON,
                    icon_hover: icon_1.PHXIcons.TABLE_CLOSE_EYE_HOVER,
                    icon_mobile: icon_1.PHXIcons.TABLE_CLOSE_EYE_MOBILE,
                };
            case 'lock-close':
                return {
                    icon: icon_1.PHXIcons.TABLE_LOCK_CLOSE_ICON,
                    icon_hover: icon_1.PHXIcons.TABLE_LOCK_CLOSE_HOVER,
                    icon_mobile: icon_1.PHXIcons.TABLE_LOCK_CLOSE_MOBILE,
                };
            default:
                return {
                    icon: icon_1.PHXIcons.TABLE_DEFAULT_LABEL,
                    icon_hover: icon_1.PHXIcons.TABLE_DEFAULT_LABEL_HOVER,
                    icon_mobile: icon_1.PHXIcons.TABLE_DEFAULT_LABEL_MOBILE,
                };
        }
    };
    return (react_1.default.createElement("div", { "aria-live": 'assertive', className: 'pointer-events-none absolute inset-0 flex items-center sm:items-start sm:px-4 sm:py-6' },
        react_1.default.createElement("div", { className: 'fixed bottom-10 left-0 z-[50] mr-8 flex w-full flex-col items-center' },
            react_1.default.createElement(react_3.Transition, { as: react_2.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-300 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', show: selectedPeople.length > 0 },
                react_1.default.createElement("div", { className: 'pointer-events-auto flex items-center gap-x-10 rounded-xl bg-indigo-800 p-2.5 text-[12px] sm:min-w-[30rem] sm:justify-between sm:gap-x-20 sm:text-xs' },
                    react_1.default.createElement("button", { className: 'flex items-center gap-x-2 rounded-lg border border-gray-600 p-1.5 text-white hover:bg-white hover:bg-opacity-10', onClick: toggleAll, type: 'button' },
                        react_1.default.createElement("p", { className: 'font-normal' }, selectedPeople === null || selectedPeople === void 0 ? void 0 :
                            selectedPeople.length,
                            " ",
                            slectedTitle,
                            " \u0111\u00E3 ch\u1ECDn"),
                        react_1.default.createElement(outline_1.XMarkIcon, { className: 'mt-0.5 h-4 w-4' })),
                    react_1.default.createElement("div", { className: 'hidden items-center gap-x-1 text-gray-300 sm:flex' }, selectedBtn.map((item, index) => (react_1.default.createElement("button", { key: index + 1, className: (0, types_1.classNames)('flex gap-x-1 rounded-lg px-2.5 py-1.5 hover:bg-white hover:bg-opacity-10 hover:text-white', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: () => item.onClick(selectedPeople), onMouseOut: () => setIsActionOver({ index, isOver: false }), onMouseOver: () => setIsActionOver({ index, isOver: true }), type: 'button' },
                        react_1.default.createElement(image_1.default, { alt: '', height: 16, src: isActionOver.index === index && isActionOver.isOver
                                ? iconAction(item === null || item === void 0 ? void 0 : item.icon).icon_hover
                                : iconAction(item === null || item === void 0 ? void 0 : item.icon).icon, width: 16 }),
                        react_1.default.createElement("p", null, item.content))))),
                    selectedBtn.length <= 1 && (react_1.default.createElement("div", { className: 'flex items-center gap-x-1 text-gray-300 sm:hidden' }, selectedBtn.map((item, index) => (react_1.default.createElement("button", { key: index + 1, className: (0, types_1.classNames)('flex gap-x-1 rounded-lg px-2.5 py-1.5 hover:bg-white hover:bg-opacity-10 hover:text-white', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: () => item.onClick(selectedPeople), type: 'button' },
                        react_1.default.createElement(image_1.default, { alt: '', height: 16, src: iconAction(item === null || item === void 0 ? void 0 : item.icon).icon, width: 16 }),
                        react_1.default.createElement("p", null, item.content)))))),
                    selectedBtn.length > 1 && (react_1.default.createElement("div", { className: 'flex items-center gap-x-1 sm:hidden' },
                        react_1.default.createElement(react_3.Menu, { as: 'div', className: 'relative inline-block text-left' }, ({ open }) => (react_1.default.createElement("div", null,
                            react_1.default.createElement(react_3.Menu.Button, null,
                                react_1.default.createElement("div", { className: 'flex gap-x-1 rounded-lg px-2.5 py-1.5 text-gray-300 hover:bg-white hover:bg-opacity-10 hover:text-white' },
                                    react_1.default.createElement("p", null, "Xem th\u00EAm"),
                                    open ? (react_1.default.createElement(image_1.default, { alt: '', height: 16, src: icon_1.PHXIcons.TABLE_ARROW_DOWN, width: 16 })) : (react_1.default.createElement(image_1.default, { alt: '', height: 16, src: icon_1.PHXIcons.TABLE_ARROW_UP, width: 16 })))),
                            react_1.default.createElement(react_3.Transition, { as: react_2.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_3.Menu.Items, { className: (0, types_1.classNames)('absolute bottom-11 right-0 z-[50] min-w-[5.2rem] whitespace-nowrap rounded-lg border bg-white px-3 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' }, selectedBtn.map((item, index) => (react_1.default.createElement(react_3.Menu.Item, { key: index },
                                            react_1.default.createElement("button", { key: index + 1, className: (0, types_1.classNames)('flex gap-x-1 rounded-lg py-1.5 hover:bg-white hover:bg-opacity-10', (item === null || item === void 0 ? void 0 : item.destructive) ? 'text-red-400 hover:!text-red-400' : ''), onClick: () => item.onClick(selectedPeople), type: 'button' },
                                                react_1.default.createElement(image_1.default, { alt: '', className: 'h-[16px] max-w-[16px]', height: 16, src: iconAction(item === null || item === void 0 ? void 0 : item.icon).icon_mobile, width: 16 }),
                                                react_1.default.createElement("p", null, item.content)))))))))))))))))));
}
exports.default = SelectedAction;
//# sourceMappingURL=SelectedAction.js.map