import React, { Fragment } from 'react';
import { Menu, Transition } from '@headlessui/react';
import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
import { classNames } from '../types';
function ButtonAction({ importData, exportData, secondaryActions, downloadText, uploadText, sortedSecondaryActions, onDownload, onUpload, isDropdown, dropdown, listAction, }) {
    var _a;
    const handleDownload = () => {
        if (onDownload) {
            onDownload();
        }
    };
    const handleUpload = () => {
        if (onUpload) {
            onUpload();
        }
    };
    const showMobileMenu = importData ||
        exportData ||
        (secondaryActions && secondaryActions.length) ||
        (listAction && listAction.length) ||
        (isDropdown && ((_a = dropdown === null || dropdown === void 0 ? void 0 : dropdown.options) === null || _a === void 0 ? void 0 : _a.length));
    return (React.createElement(Menu, { as: 'div', className: showMobileMenu ? 'relative md:hidden' : 'hidden' },
        React.createElement(Menu.Button, { className: 'flex items-center rounded-lg bg-gray-200 p-1.5 px-2 py-1 text-sm hover:bg-gray-300' },
            React.createElement("span", { className: 'sr-only' }, "Open menu"),
            React.createElement(EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'h-5 w-5 rounded text-gray-400' })),
        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: 'absolute right-0 z-10 mt-2.5 w-32 origin-top-left rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none' },
                exportData && (React.createElement(Menu.Item, null, ({ active }) => (React.createElement("p", { className: classNames(active ? 'bg-gray-50' : '', 'block px-3 py-1 text-xs leading-6 text-gray-900'), onClick: handleDownload }, downloadText)))),
                importData && (React.createElement(Menu.Item, null, ({ active }) => (React.createElement("p", { className: classNames(active ? 'bg-gray-50' : '', 'block px-3 py-1 text-xs leading-6 text-gray-900'), onClick: handleUpload }, uploadText)))),
                (listAction === null || listAction === void 0 ? void 0 : listAction.length) > 0 &&
                    listAction.map((item, index) => (React.createElement(Menu.Item, { key: index }, ({ active }) => (React.createElement("p", { className: classNames(active ? 'bg-gray-100 font-medium text-gray-900' : 'text-gray-700', 'block cursor-pointer px-3 py-1.5 text-xs'), onClick: item.onClick }, item.content))))),
                secondaryActions &&
                    sortedSecondaryActions.map((action) => (React.createElement(Menu.Item, { key: action.id }, ({ active }) => (React.createElement("p", { className: classNames(active ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-2.5 py-2 text-xs', action.active && !action.deleted && 'rounded-lg bg-gray-200 font-semibold text-gray-900', action.deleted && !action.active && 'text-red-800 hover:bg-red-100', action.deleted && action.active && 'rounded-lg bg-red-200 font-semibold text-red-800'), onClick: action.onClick }, action.content))))),
                isDropdown &&
                    (dropdown === null || dropdown === void 0 ? void 0 : dropdown.options) &&
                    dropdown.options.length > 0 &&
                    dropdown.options.map((item, index) => (React.createElement(Menu.Item, { key: index }, ({ active }) => (React.createElement("p", { className: classNames(active ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-2.5 py-2 text-xs'), onClick: item.onClick }, item.content)))))))));
}
export default ButtonAction;
//# sourceMappingURL=ButtonAction.js.map