import React, { useState } from 'react';
import { Fragment } from 'react';
import { Menu, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { classNames } from '../types';
import { PHXIcons } from '../../assets/icon';
import Image from 'next/image';
function SelectedAction({ selectedBtn, selectedPeople, slectedTitle = 'bản ghi', toggleAll, }) {
    const [isActionOver, setIsActionOver] = useState({
        index: 0,
        isOver: false,
    });
    const iconAction = (icon) => {
        switch (icon) {
            case 'check-circle':
                return {
                    icon: PHXIcons.TABLE_CHECK_CIRCLE,
                    icon_hover: PHXIcons.TABLE_CHECK_CIRCLE_HOVER,
                    icon_mobile: PHXIcons.TABLE_CHECK_CIRCLE_MOBILE,
                };
            case 'close-circle':
                return {
                    icon: PHXIcons.TABBLE_CLOSE_CIRCLE,
                    icon_hover: PHXIcons.TABLE_CLOSE_CIRCLE_HOVER,
                    icon_mobile: PHXIcons.TABLE_CLOSE_CIRCLE_MOBILE,
                };
            case 'open-eye':
                return {
                    icon: PHXIcons.TABLE_OPEN_EYE_ICON,
                    icon_hover: PHXIcons.TABLE_OPEN_EYE_HOVER,
                    icon_mobile: PHXIcons.TABLE_OPEN_EYE_MOBILE,
                };
            case 'close-eye':
                return {
                    icon: PHXIcons.TABLE_CLOSE_EYE_ICON,
                    icon_hover: PHXIcons.TABLE_CLOSE_EYE_HOVER,
                    icon_mobile: PHXIcons.TABLE_CLOSE_EYE_MOBILE,
                };
            case 'lock-close':
                return {
                    icon: PHXIcons.TABLE_LOCK_CLOSE_ICON,
                    icon_hover: PHXIcons.TABLE_LOCK_CLOSE_HOVER,
                    icon_mobile: PHXIcons.TABLE_LOCK_CLOSE_MOBILE,
                };
            default:
                return {
                    icon: PHXIcons.TABLE_DEFAULT_LABEL,
                    icon_hover: PHXIcons.TABLE_DEFAULT_LABEL_HOVER,
                    icon_mobile: PHXIcons.TABLE_DEFAULT_LABEL_MOBILE,
                };
        }
    };
    return (React.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.createElement("div", { className: 'fixed bottom-10 left-0 z-[50] mr-8 flex w-full flex-col items-center' },
            React.createElement(Transition, { as: 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.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.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.createElement("p", { className: 'font-normal' }, selectedPeople === null || selectedPeople === void 0 ? void 0 :
                            selectedPeople.length,
                            " ",
                            slectedTitle,
                            " \u0111\u00E3 ch\u1ECDn"),
                        React.createElement(XMarkIcon, { className: 'mt-0.5 h-4 w-4' })),
                    React.createElement("div", { className: 'hidden items-center gap-x-1 text-gray-300 sm:flex' }, selectedBtn.map((item, index) => (React.createElement("button", { key: index + 1, className: 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.createElement(Image, { 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.createElement("p", null, item.content))))),
                    selectedBtn.length <= 1 && (React.createElement("div", { className: 'flex items-center gap-x-1 text-gray-300 sm:hidden' }, selectedBtn.map((item, index) => (React.createElement("button", { key: index + 1, className: 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.createElement(Image, { alt: '', height: 16, src: iconAction(item === null || item === void 0 ? void 0 : item.icon).icon, width: 16 }),
                        React.createElement("p", null, item.content)))))),
                    selectedBtn.length > 1 && (React.createElement("div", { className: 'flex items-center gap-x-1 sm:hidden' },
                        React.createElement(Menu, { as: 'div', className: 'relative inline-block text-left' }, ({ open }) => (React.createElement("div", null,
                            React.createElement(Menu.Button, null,
                                React.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.createElement("p", null, "Xem th\u00EAm"),
                                    open ? (React.createElement(Image, { alt: '', height: 16, src: PHXIcons.TABLE_ARROW_DOWN, width: 16 })) : (React.createElement(Image, { alt: '', height: 16, src: PHXIcons.TABLE_ARROW_UP, width: 16 })))),
                            React.createElement(Transition, { as: 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.createElement(Menu.Items, { className: 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.createElement(React.Fragment, null,
                                        React.createElement("div", { className: 'py-1' }, selectedBtn.map((item, index) => (React.createElement(Menu.Item, { key: index },
                                            React.createElement("button", { key: index + 1, className: 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.createElement(Image, { 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.createElement("p", null, item.content)))))))))))))))))));
}
export default SelectedAction;
//# sourceMappingURL=SelectedAction.js.map