import React, { useState } from 'react';
import { classNames } from '../types';
export function PHXSwitchView({ className, dataSwitch, defaultTab, getOnlyTitleOfSwitch, onClickSwitch, }) {
    var _a, _b, _c;
    const defaultActive = dataSwitch ? (getOnlyTitleOfSwitch ? dataSwitch[0].id : dataSwitch[0].name) : null;
    const [current, setCurrent] = useState(defaultTab ? defaultTab : defaultActive);
    return (React.createElement("div", { className: className },
        React.createElement("div", { className: 'mb-4' },
            React.createElement("div", { className: 'sm:hidden' },
                React.createElement("label", { className: 'sr-only', htmlFor: 'tabs' }),
                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 = dataSwitch === null || dataSwitch === void 0 ? void 0 : dataSwitch.find((switchItem) => (switchItem.id || switchItem.name) === current)) === null || _a === void 0 ? void 0 : _a.name, id: 'tabs', name: 'tabs', onChange: (e) => {
                        setCurrent(e.target.value);
                        getOnlyTitleOfSwitch === null || getOnlyTitleOfSwitch === void 0 ? void 0 : getOnlyTitleOfSwitch(e.target.value);
                    } }, dataSwitch === null || dataSwitch === void 0 ? void 0 : dataSwitch.map((switchItem) => (React.createElement("option", { key: switchItem.name, value: switchItem.id || switchItem.name }, switchItem.name))))),
            React.createElement("div", { className: 'hidden sm:block' },
                React.createElement("nav", { "aria-label": 'Tabs', className: 'flex space-x-1 rounded-xl border border-gray-300 bg-[#F5F5F5] p-1 shadow' }, dataSwitch === null || dataSwitch === void 0 ? void 0 : dataSwitch.map((switchItem) => (React.createElement("button", { key: switchItem.name, className: classNames((switchItem.id || switchItem.name) === current
                        ? 'text-gray-950'
                        : 'text-gray-500 hover:text-gray-700', 'group relative rounded-lg px-3 py-1.5 text-xs font-normal leading-4 focus:z-10'), onClick: () => {
                        setCurrent(switchItem.id || switchItem.name);
                        getOnlyTitleOfSwitch === null || getOnlyTitleOfSwitch === void 0 ? void 0 : getOnlyTitleOfSwitch(switchItem.id);
                        onClickSwitch && onClickSwitch(switchItem);
                    }, type: 'button' },
                    React.createElement("span", null, switchItem.name),
                    React.createElement("span", { "aria-hidden": 'true', className: classNames((switchItem.id || switchItem.name) === current ? 'bg-gray-800' : 'bg-transparent', 'absolute inset-x-0 bottom-[-0.25rem] left-[0.1rem] h-[3px] rounded-t-md transition-colors duration-200 group-hover:bg-gray-400') })))))),
            React.createElement("div", null, dataSwitch && ((_b = dataSwitch.find((switchItem) => (switchItem.id || switchItem.name) === current)) === null || _b === void 0 ? void 0 : _b.component) ? (React.createElement("div", { className: 'pt-4' }, (_c = dataSwitch === null || dataSwitch === void 0 ? void 0 : dataSwitch.find((switchItem) => (switchItem.id || switchItem.name) === current)) === null || _c === void 0 ? void 0 : _c.component)) : (React.createElement(React.Fragment, null))))));
}
//# sourceMappingURL=SwitchView.js.map