import React, { useEffect, useState } from 'react';
import { classNames } from '../types';
import { PHXBadge } from '../Badge';
import { PHXCard } from '../Card';
import { PHXSelect } from '../Select';
export function PHXTabs({ aggregate, children, className, dataTabs, dataTabsQuery, defaultTab, filterValue, getOnlyTitleOfTabs, getQuery, getQuerySearch, pagination, paginationData, titleComponent, tabComponent, type = 'default', onClickTab, isNotSpacing = false, }) {
    var _a, _b;
    const defaultActive = dataTabs
        ? getOnlyTitleOfTabs
            ? dataTabs[0].id
            : dataTabs[0].name
        : dataTabsQuery
            ? dataTabsQuery[0].name
            : null;
    const [current, setCurrent] = useState(defaultTab ? defaultTab : defaultActive);
    const currTab = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => (tab.id || tab.name) === current);
    const handleChangeTabsQuery = (eventValue) => {
        var _a, _b;
        setCurrent(eventValue);
        if (dataTabsQuery && paginationData) {
            paginationData(0);
            getQuery((_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === eventValue)) === null || _a === void 0 ? void 0 : _a.query);
            getQuerySearch((_b = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === eventValue)) === null || _b === void 0 ? void 0 : _b.querySearch);
        }
    };
    useEffect(() => {
        var _a, _b;
        if (dataTabsQuery && filterValue) {
            getQuery((_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === current)) === null || _a === void 0 ? void 0 : _a.query);
            getQuerySearch((_b = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === current)) === null || _b === void 0 ? void 0 : _b.querySearch);
        }
    }, [filterValue, pagination]);
    const componentByTab = (React.createElement(React.Fragment, null, ((_a = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => (tab.id || tab.name) === current)) === null || _a === void 0 ? void 0 : _a.component) && (React.createElement("div", { className: 'pt-4' }, (_b = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => (tab.id || tab.name) === current)) === null || _b === void 0 ? void 0 : _b.component))));
    const Tabs = () => dataTabsQuery ? (React.createElement("div", { className: classNames(isNotSpacing ? '' : 'mb-4') },
        React.createElement("div", { className: 'sm:hidden' },
            React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
            React.createElement("select", { className: 'block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm', value: current, id: 'tabs', name: 'tabs', onChange: (e) => handleChangeTabsQuery(e.target.value) }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map((tab) => (React.createElement("option", { key: tab.name, value: tab.name }, tab.name === current && aggregate ? `${tab.name} (${aggregate})` : tab.name))))),
        React.createElement("div", { className: 'hidden sm:block' },
            React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map((tab) => (React.createElement("button", { key: tab.name, className: classNames(tab.name === current ? 'bg-gray-200 text-gray-800' : 'text-gray-600 hover:bg-gray-200', 'rounded-lg px-3 py-1.5 text-xs font-normal leading-4'), onClick: () => handleChangeTabsQuery(tab.name), type: 'button' }, tab.name === current && aggregate ? (React.createElement("span", null,
                tab.name,
                "\u00A0",
                React.createElement(PHXBadge, { text: `${aggregate}`, type: 'informational' }))) : (tab.name)))))),
        children)) : (React.createElement("div", { className: classNames(isNotSpacing ? '' : 'mb-4') },
        React.createElement("div", { className: 'sm:hidden' },
            React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
            React.createElement(PHXSelect
            // className='block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm'
            , { 
                // className='block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm'
                value: (currTab === null || currTab === void 0 ? void 0 : currTab.id) || (currTab === null || currTab === void 0 ? void 0 : currTab.name), id: 'tabs', name: 'tabs', onChange: (e) => {
                    const val = isNaN(Number(e.target.value)) ? e.target.value : Number(e.target.value);
                    setCurrent(val);
                    getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(val);
                    const tab = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((item) => (item.id || item.name) === val);
                    onClickTab === null || onClickTab === void 0 ? void 0 : onClickTab(tab);
                } }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map((tab) => (React.createElement("option", { key: tab.name, disabled: tab.disabled, value: tab.id || tab.name }, tab.name)))),
            componentByTab),
        React.createElement("div", { className: 'hidden sm:block' },
            React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map((tab) => (React.createElement("button", { key: tab.name, className: tab.disabled
                    ? 'text-xs px-3 py-1.5 font-normal leading-4 text-gray-400'
                    : classNames((tab.id || tab.name) === current
                        ? 'bg-gray-200 text-gray-800'
                        : 'text-gray-600 hover:bg-gray-200', 'rounded-lg px-3 py-1.5 text-xs font-normal leading-4'), onClick: () => {
                    setCurrent(tab.id || tab.name);
                    getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(tab.id);
                    onClickTab === null || onClickTab === void 0 ? void 0 : onClickTab(tab);
                }, type: 'button', disabled: tab.disabled }, tab.name)))),
            componentByTab)));
    const TabsComponent = () => {
        var _a, _b;
        return dataTabsQuery ? (React.createElement("div", { className: 'mb-4' },
            React.createElement("div", { className: 'sm:hidden' },
                React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }, "Select a tab"),
                React.createElement("select", { className: 'block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm', defaultValue: (_a = dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.find((tab) => tab.name === current)) === null || _a === void 0 ? void 0 : _a.name, id: 'tabs', name: 'tabs', onChange: (e) => handleChangeTabsQuery(e.target.value) }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map((tab) => (React.createElement("option", { key: tab.name, value: tab.name }, tab.name === current && aggregate ? React.createElement("span", null, tab.name + ' ' + '(' + aggregate + ')') : tab.name))))),
            React.createElement("div", { className: 'hidden sm:block' },
                React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabsQuery === null || dataTabsQuery === void 0 ? void 0 : dataTabsQuery.map((tab) => (React.createElement("button", { key: tab.name, className: classNames(tab.name === current ? 'bg-gray-200 text-gray-800' : 'text-gray-600 hover:bg-gray-200', 'rounded-lg px-3 py-1.5 text-xs font-normal leading-4'), onClick: () => handleChangeTabsQuery(tab.name), type: 'button' }, tab.name === current && aggregate ? (React.createElement("span", null,
                    tab.name,
                    "\u00A0",
                    React.createElement(PHXBadge, { text: `${aggregate}`, type: 'informational' }))) : (tab.name)))))),
            children)) : (React.createElement("div", { className: 'mb-4', onClick: () => {
                var _a;
                const tabName = (_a = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => { var _a; return ((_a = tab.id) !== null && _a !== void 0 ? _a : tab.name) === current; })) === null || _a === void 0 ? void 0 : _a.name;
                if (onClickTab && tabName) {
                    onClickTab(tabName);
                }
            } },
            React.createElement("div", { className: 'flex items-center space-x-2' },
                React.createElement("select", { className: 'rounded-md hidden border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm', defaultValue: (_b = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => { var _a; return ((_a = tab.id) !== null && _a !== void 0 ? _a : tab.name) === current; })) === null || _b === void 0 ? void 0 : _b.name, id: 'tabs', name: 'tabs', onChange: (e) => {
                        setCurrent(e.target.value);
                        getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(e.target.value);
                    } }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map((tab) => {
                    var _a;
                    return (React.createElement("option", { key: tab.name, value: (_a = tab.id) !== null && _a !== void 0 ? _a : tab.name }, tab.name));
                })),
                tabComponent),
            React.createElement("div", { className: 'hidden sm:block' },
                React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map((tab) => (React.createElement("button", { key: tab.name, className: classNames((tab.id || tab.name) === current ? 'bg-gray-200 text-gray-800' : 'text-gray-600 hover:bg-gray-200', 'rounded-lg px-3 py-1.5 text-xs font-normal leading-4'), onClick: () => {
                        setCurrent(tab.id || tab.name);
                        getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(tab.id);
                    }, type: 'button' }, tab.name))))),
            componentByTab));
    };
    const TabBarUndeline = () => {
        var _a;
        return (React.createElement(React.Fragment, null,
            React.createElement("div", { className: 'sm:hidden' },
                React.createElement("select", { className: 'block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500', defaultValue: (_a = dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.find((tab) => (tab.id || tab.name) === current)) === null || _a === void 0 ? void 0 : _a.name, id: 'tabs', name: 'tabs' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map((tab) => (React.createElement("option", { key: tab.name, value: tab.id || tab.name }, tab.name))))),
            React.createElement("div", { className: 'hidden sm:block' },
                React.createElement("nav", { "aria-label": 'Tabs', className: 'isolate flex divide-x divide-gray-200 rounded-lg shadow' }, dataTabs === null || dataTabs === void 0 ? void 0 : dataTabs.map((tab, index) => (React.createElement("button", { key: tab.name, className: classNames(tab.name ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700', index === 0 ? 'rounded-l-lg' : '', index === dataTabs.length - 1 ? 'rounded-r-lg' : '', 'group relative min-w-0 flex-1 overflow-hidden bg-white px-4 py-4 text-center text-sm font-medium hover:bg-gray-50 focus:z-10'), onClick: () => {
                        setCurrent(tab.id || tab.name);
                        getOnlyTitleOfTabs === null || getOnlyTitleOfTabs === void 0 ? void 0 : getOnlyTitleOfTabs(tab.id);
                        onClickTab && onClickTab(tab);
                    }, type: 'button' },
                    React.createElement("span", null, tab.name),
                    React.createElement("span", { "aria-hidden": 'true', className: classNames((tab.id || tab.name) === current ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5') }))))),
                componentByTab)));
    };
    return (React.createElement("div", { className: className }, type === 'inside-of-card' ? (React.createElement(PHXCard, null,
        React.createElement(Tabs, null))) : type === 'bar-underline' ? (React.createElement(TabBarUndeline, null)) : type === 'inside-component' ? (React.createElement(PHXCard, { title: titleComponent, primaryHeader: true },
        React.createElement(TabsComponent, null))) : (React.createElement(Tabs, null))));
}
//# sourceMappingURL=Tabs.js.map