/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.98.7
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext, useEffect, useRef, useState, } from 'react';
import styled from 'styled-components';
import { tasty } from '../../../tasty';
import { useLayoutEffect } from '../../../utils/react';
import { Button } from '../../actions';
import { Block } from '../../Block';
import { Flex } from '../../layout/Flex';
import { Flow } from '../../layout/Flow';
import { Space } from '../../layout/Space';
const LegacyTabsContext = createContext({
    addTab() { },
    removeTab() { },
    setTab() { },
    changeTab() { },
});
const TabElement = tasty(Button, {
    type: 'tab',
    styles: {
        color: {
            '': '#dark',
            'selected, hovered': '#purple-text',
            disabled: '#dark.50',
        },
        fill: '#purple.0',
        textAlign: 'center',
        fontWeight: 600,
        radius: '1r 1r 0 0',
        border: 0,
    },
});
const StyledTabElement = styled(TabElement) `
  &::before {
    --outline-size: 0px;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
    pointer-events: none;
    transition:
      opacity linear 0.2s,
      box-shadow linear 0.2s;
  }

  &[data-selected]::before {
    --outline-size: 2px;
  }

  &:not([data-selected]):not([disabled])[data-hovered]::before {
    --outline-size: 1px;
  }
`;
const TabsPanelElement = tasty(Space, {
    styles: {
        gap: '1x',
        flexShrink: 0,
    },
});
const StyledTabsPanelElement = styled(TabsPanelElement) `
  position: relative;
  overflow: auto hidden;
  top: 1px;
  white-space: nowrap;

  ::-webkit-scrollbar-track {
    background: var(--dark-bg-color);
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: var(--dark-04-color);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
`;
const TabsContainerElement = tasty(Flow, {
    styles: {
        flow: 'column',
        height: 'max 100%',
        width: 'max 100%',
    },
});
const StyledTabsContainerElement = styled(TabsContainerElement) `
  position: relative;

  &::before {
    content: '';
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 32px;
    height: 37px;
    transition: all 0.15s linear;
    background-image: linear-gradient(
      to left,
      rgb(255 255 255 / 0),
      rgb(255 255 255 / 1)
    );
    z-index: 1;
  }

  &::after {
    content: '';
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 37px;
    pointer-events: none;
    transition: all 0.15s linear;
    background-image: linear-gradient(
      to right,
      rgb(255 255 255 / 0),
      rgb(255 255 255 / 1)
    );
    z-index: 1;
  }

  &[data-left-fade]::before,
  &[data-right-fade]::after {
    opacity: 1;
  }
`;
function Tab({ isSelected, isHidden, onClose, ...props }) {
    return (_jsx(StyledTabElement, { isSelected: isSelected, isHidden: isHidden, ...props }));
}
export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, children, ...props }) {
    const tabsRef = useRef(null);
    const [tabs, setTabs] = useState([]);
    const [activeKey, setActiveKey] = useState(activeKeyProp || defaultActiveKey);
    const [leftFade, setLeftFade] = useState(false);
    const [rightFade, setRightFade] = useState(false);
    function updateScroll() {
        const el = tabsRef && tabsRef.current;
        if (!el)
            return;
        setLeftFade(!!el.scrollLeft);
        setRightFade(el.scrollWidth !== el.offsetWidth &&
            !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
    }
    useLayoutEffect(updateScroll, [tabs]);
    function scrollCurrentIntoView() {
        const el = tabsRef && tabsRef.current;
        if (!el)
            return;
        const current = el.querySelector('button[disabled]');
        if (!current)
            return;
        current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });
    }
    useEffect(() => {
        function update() {
            updateScroll();
        }
        if (tabsRef && tabsRef.current) {
            tabsRef.current.addEventListener('scroll', update);
            tabsRef.current.addEventListener('mousewheel', update);
            window.addEventListener('resize', update);
        }
        return () => {
            if (tabsRef && tabsRef.current) {
                tabsRef.current.removeEventListener('scroll', update);
                tabsRef.current.removeEventListener('mousewheel', update);
            }
            window.removeEventListener('resize', update);
        };
    }, [tabsRef]);
    useEffect(scrollCurrentIntoView, [activeKey]);
    useEffect(() => {
        setActiveKey(activeKeyProp);
    }, [activeKeyProp]);
    function getTab(tabs, key) {
        return tabs.find((tab) => tab.id === key);
    }
    function setTab(key) {
        if (getTab(tabs, key)) {
            setActiveKey(key);
        }
    }
    function addTab(tab) {
        setTabs((tabs) => {
            if (!getTab(tabs, tab.id)) {
                return [...tabs, tab];
            }
            return tabs;
        });
    }
    function removeTab(tab) {
        setTabs((tabs) => {
            const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);
            setActiveKey((prevActiveKey) => {
                if (prevActiveKey === tab.id) {
                    return _tabs[0] && _tabs[0].id;
                }
                return prevActiveKey;
            });
            return _tabs;
        });
    }
    function changeTab(tab) {
        setTabs((tabs) => {
            const existTab = tabs.find((_tab) => _tab.id === tab.id);
            if (existTab) {
                Object.assign(existTab, tab);
            }
            return [...tabs];
        });
    }
    function onPress(tab) {
        onTabClick && onTabClick(tab.id);
        setTab(tab.id);
    }
    return (_jsx(StyledTabsContainerElement, { "data-left-fade": leftFade || null, "data-right-fade": rightFade || null, ...props, children: _jsxs(LegacyTabsContext.Provider, { value: {
                addTab,
                setTab,
                removeTab,
                changeTab,
                currentTab: activeKey,
            }, children: [_jsxs(Space, { gap: ".5x", placeContent: "center space-between", children: [_jsx(StyledTabsPanelElement, { ref: tabsRef, children: tabs.map((tab) => {
                                return (_jsx(Tab, { "data-qa": tab.qa, isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, onPress: () => onPress(tab), children: tab.title }, tab.id));
                            }) }), extra] }), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children })] }) }));
}
LegacyTabs.TabPane = function TabPane({ id, title, qa, isHidden, isDisabled, children, ...props }) {
    const { addTab, removeTab, changeTab, currentTab } = useContext(LegacyTabsContext);
    useEffect(() => {
        const tabData = {
            id,
            qa,
            title,
            isDisabled,
            isHidden,
        };
        addTab(tabData);
        return () => {
            removeTab(tabData);
        };
    }, [id]);
    useEffect(() => {
        changeTab({
            id,
            qa,
            title,
            isDisabled,
            isHidden,
        });
    }, [title, isDisabled, isHidden]);
    const isCurrent = id === currentTab;
    return (_jsx(Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }));
};

        