import { Menu, Transition } from '@headlessui/react';
import { ArrowsUpDownIcon } from '@heroicons/react/20/solid';
import React, { Fragment } from 'react';
import SelectSort from './SelectSort';
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
const Sort = ({ activeMenu, className, isSearch, onChange, onChangeSelect, selectArray, sortList }) => {
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: `${className} sm:block` }, sortList.map((sortItem) => sortItem.type === 'select-filter' && isSearch ? (React.createElement(SelectSort, { key: sortItem.id, activeMenu: activeMenu, onChangeSelect: onChangeSelect, selectArray: selectArray, sortItem: sortItem })) : (React.createElement("button", { key: sortItem.id, className: classNames('mr-1 hidden items-center rounded-lg border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200', activeMenu === sortItem.id ? 'bg-gray-200' : 'bg-transparent', sortItem.type === 'select-filter' || isSearch ? 'hidden' : 'sm:inline-flex'), onClick: () => onChange(sortItem), type: 'button' }, sortItem.name)))),
        React.createElement(Menu, { as: 'div', className: classNames(isSearch ? 'hidden' : 'relative inline-block text-left sm:hidden') },
            React.createElement("div", null,
                React.createElement(Menu.Button, { className: 'flex rounded-lg bg-white px-2 py-1 text-xs font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]' },
                    React.createElement(ArrowsUpDownIcon, { "aria-hidden": 'true', className: 'h-4 w-4' }))),
            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 max-h-96 overflow-y-auto right-0 z-10 mt-2 w-56 min-w-max origin-top-right rounded-md bg-white px-1 shadow-lg ring-1 ring-black  ring-opacity-5 drop-shadow-lg focus:outline-none' },
                    React.createElement("div", { className: 'py-1' }, sortList.map((sortItem) => (React.createElement(Menu.Item, { key: sortItem.id }, ({ active }) => (React.createElement("button", { className: classNames(active || activeMenu === sortItem.id ? 'bg-gray-200 text-[#303030]' : 'text-gray-700', sortItem.type === 'select-filter' ? 'hidden' : '', 'bg-gray-200" my-[1px] block w-full min-w-max  cursor-pointer rounded-lg border-gray-300 px-2  py-2 text-left  text-xs font-medium text-gray-700 transition-all hover:bg-gray-200  sm:text-xs'), onClick: () => onChange(sortItem), type: 'button' }, sortItem.name)))))))))));
};
export default Sort;
//# sourceMappingURL=sort.js.map