import React__default from 'react';
import '@emotion/core';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-bfe8e225.js';
import { u as useCustomCss } from './utilities-357c56e6.js';
import { TabContext } from './TabProvider.js';

var TabButton = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, onChange = _a.onChange, _c = _a.customCss, customCss = _c === void 0 ? '' : _c, forPanelId = _a.forPanelId, selected = _a.selected, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, props = __rest(_a, ["label", "onChange", "customCss", "forPanelId", "selected", "leftIcon", "rightIcon"]);
    var id = useId(props.id);
    var resolvedCss = useCustomCss(customCss);
    var tabContext = React__default.useContext(TabContext);
    var handleClick = function (e) {
        if (onChange) {
            onChange(!selected, e);
        }
        if (tabContext && id) {
            if (tabContext.onChange) {
                tabContext.onChange(id);
            }
        }
    };
    var handleArrowKey = function (e) {
        var currentTab = e.target;
        var parentElement = currentTab.parentNode;
        if (parentElement) {
            var tabArray = Array.from(parentElement.children);
            var currentTabIndex = tabArray.indexOf(currentTab);
            if (e.key && e.key === 'ArrowRight') {
                if (tabArray[currentTabIndex + 1]) {
                    tabArray[currentTabIndex + 1].focus();
                }
                else {
                    tabArray[0].focus();
                }
            }
            else {
                if (tabArray[currentTabIndex - 1]) {
                    tabArray[currentTabIndex - 1].focus();
                }
                else {
                    tabArray[tabArray.length - 1].focus();
                }
            }
        }
    };
    return (jsxs(Button, __assign({ css: resolvedCss, "aria-selected": selected || (tabContext !== null && tabContext.activeTabId === id), "aria-controls": forPanelId, id: id, onClick: handleClick, role: "tab", tabIndex: selected || (tabContext !== null && tabContext.activeTabId === id)
            ? 0
            : -1, onKeyDown: function (e) {
            if ((e.key && e.key === 'ArrowRight') ||
                (e.key && e.key === 'ArrowLeft')) {
                handleArrowKey(e);
            }
        } }, props, { children: [leftIcon && jsx(StyledLeftIconDiv, __assign({ className: selected ? 'selected' : '' }, { children: leftIcon }), void 0), label, rightIcon && jsx(StyledRightIconDiv, __assign({ className: selected ? 'selected' : '' }, { children: rightIcon }), void 0),
            (selected || (tabContext !== null && tabContext.activeTabId === id)) && (jsx("div", { className: "selected-bar" }, void 0))] }), void 0));
};
var Button = styled('button')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 1em;\n  font-weight: 600;\n  letter-spacing: 0px;\n  color: #676767;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background: #fff;\n  border-radius: 8px;\n  border: none;\n  height: 41px;\n  border: 2px solid transparent;\n  padding: 10px 12px;\n  transition-property: transform, background;\n  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  transition-duration: 0.3s;\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n    outline: none;\n  }\n  &:active {\n    background-color: #dce0e6;\n    display: flex;\n    flex-direction: row;\n  }\n  &:hover {\n    background-color: #e2e0e0;\n  }\n  &:after {\n    content: '';\n    display: block;\n    height: 4px;\n    width: 0;\n    background: transparent;\n    position: absolute;\n    bottom: -15px;\n    transition-property: width, background;\n    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    transition-duration: 0.3s;\n  }\n  &[aria-selected='true'] {\n    background: ", ";\n    transform: scale(1);\n    color: #fff;\n    &:after {\n      background: ", ";\n      width: 80%;\n    }\n    > .selected-bar {\n      position: absolute;\n    }\n  }\n"], ["\n  font-size: 1em;\n  font-weight: 600;\n  letter-spacing: 0px;\n  color: #676767;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background: #fff;\n  border-radius: 8px;\n  border: none;\n  height: 41px;\n  border: 2px solid transparent;\n  padding: 10px 12px;\n  transition-property: transform, background;\n  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  transition-duration: 0.3s;\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n    outline: none;\n  }\n  &:active {\n    background-color: #dce0e6;\n    display: flex;\n    flex-direction: row;\n  }\n  &:hover {\n    background-color: #e2e0e0;\n  }\n  &:after {\n    content: '';\n    display: block;\n    height: 4px;\n    width: 0;\n    background: transparent;\n    position: absolute;\n    bottom: -15px;\n    transition-property: width, background;\n    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    transition-duration: 0.3s;\n  }\n  &[aria-selected='true'] {\n    background: ", ";\n    transform: scale(1);\n    color: #fff;\n    &:after {\n      background: ", ";\n      width: 80%;\n    }\n    > .selected-bar {\n      position: absolute;\n    }\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
});
var StyledLeftIconDiv = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-right: 10px;\n  fill: #676767;\n  &.selected {\n    fill: #fff;\n  }\n"], ["\n  padding-right: 10px;\n  fill: #676767;\n  &.selected {\n    fill: #fff;\n  }\n"])));
var StyledRightIconDiv = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: 10px;\n  fill: #676767;\n  &.selected {\n    fill: #fff;\n  }\n"], ["\n  padding-left: 10px;\n  fill: #676767;\n  &.selected {\n    fill: #fff;\n  }\n"])));
var templateObject_1, templateObject_2, templateObject_3;

export { TabButton };
//# sourceMappingURL=TabButton.js.map
