import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext, useState, useMemo, useLayoutEffect, useRef, useEffect, } from 'react';
import { Action, tasty, CloseIcon } from '@cube-dev/ui-kit';
import { useEvent } from '../../hooks';
const TabsContext = createContext(undefined);
const TabsElement = tasty({
    styles: {
        display: 'grid',
        gridColumns: 'max-content max-content',
        placeContent: 'stretch space-between',
        placeItems: 'end',
        overflow: 'auto',
        shadow: 'inset 0 -1bw 0 #border',
        width: '100%',
        padding: '0 2x',
        scrollbarWidth: 'none',
        Container: {
            display: 'grid',
            gridAutoFlow: 'column',
            gap: {
                '': 0,
                card: '1bw',
            },
            placeContent: 'start',
        },
        Extra: {
            placeSelf: 'center',
        },
        '--border-color': 'rgb(234,234,238)',
        '--light-purple-color': 'rgb(243,243,255)',
    },
});
const TabContainer = tasty({
    styles: {
        position: 'relative',
        display: 'grid',
    },
});
const TabElement = tasty(Action, {
    styles: {
        position: 'relative',
        preset: {
            '': 't3m',
            '[data-size="large"]': 't2m',
        },
        display: 'grid',
        flow: 'column',
        gap: '1x',
        placeContent: 'space-between',
        placeItems: 'center start',
        padding: '1.25x @delete-padding 1.25x 1.5x',
        cursor: 'pointer',
        border: {
            '': 'none',
            card: true,
        },
        fill: {
            '': '#white',
            card: '#light',
            'hovered && card': '#light-purple',
            active: '#white',
        },
        color: {
            '': '#dark-02',
            hovered: '#purple',
            active: '#purple-text',
            'disabled & !active': '#dark-04',
        },
        borderBottom: {
            '': 'none',
            card: 'none',
        },
        shadow: {
            '': 'inset 0 -1bw 0 #border',
            active: 'inset 0 -1ow 0 #purple',
            'card & active': 'inset 0 -1bw 0 #white',
        },
        radius: 'top',
        backgroundClip: 'border-box',
        width: 'max 100%',
        transition: 'theme, borderBottom',
        whiteSpace: 'nowrap',
        outline: false,
        '@delete-padding': {
            '': '1.5x',
            deletable: '4.5x',
        },
        '&::before': {
            content: '""',
            display: 'block',
            position: 'absolute',
            inset: '0 0 -1ow 0',
            pointerEvents: 'none',
            radius: 'top',
            shadow: {
                '': 'inset 0 0 0 #purple',
                focused: 'inset 0 0 0 1ow #purple-03',
            },
            transition: 'theme',
            zIndex: 1,
        },
    },
});
const TabCloseButton = tasty(Action, {
    'aria-label': 'Delete tab',
    styles: {
        position: 'absolute',
        top: '1x',
        right: '1x',
        display: 'grid',
        placeItems: 'center',
        padding: '.5x',
        cursor: 'pointer',
        fontSize: '12px',
        fill: {
            '': '#clean',
            hovered: '#purple.04',
        },
        color: {
            '': '#dark-03',
            'hovered | pressed': '#purple',
        },
        radius: true,
        transition: 'theme',
    },
    children: _jsx(CloseIcon, {}),
});
export function Tabs(props) {
    const [contentMap, setContentMap] = useState(new Map());
    const { label, activeKey, size, type, onChange, onDelete, children, styles, extra, prerender, keepMounted, } = props;
    const isCardType = type === 'card';
    // Update the content map whenever the activeKey changes
    const setTabContent = useEvent((id, content) => {
        setContentMap((prev) => {
            const newMap = new Map(prev);
            if (content) {
                newMap.set(id, content);
            }
            else {
                newMap.delete(id);
            }
            return newMap;
        });
    });
    const mods = useMemo(() => ({ card: isCardType, deletable: !!onDelete }), [isCardType, onDelete]);
    return (_jsxs(TabsContext.Provider, { value: { activeKey, onChange, onDelete, type, size, setTabContent, prerender, keepMounted }, children: [_jsxs(TabsElement, { qa: "Tabs", "aria-label": label ?? 'Tabs', "data-size": size ?? 'normal', mods: mods, styles: styles, children: [_jsx("div", { "data-element": "Container", children: children }), extra ? _jsx("div", { "data-element": "Extra", children: extra }) : null] }), [...contentMap.entries()].map(([id, { content, prerender, keepMounted }]) => prerender || id === activeKey || keepMounted ? (_jsx("div", { "data-qa": "TabPanel", "data-qaval": id, style: {
                    display: id === activeKey ? 'contents' : 'none',
                }, children: content }, id)) : null)] }));
}
export function Tab(props) {
    let { title, id, isDisabled, prerender, keepMounted, qa, qaVal, styles, children } = props;
    const ref = useRef(null);
    const { activeKey, size, type, onChange, onDelete, setTabContent, ...contextProps } = useContext(TabsContext) || {};
    prerender = prerender ?? contextProps.prerender;
    keepMounted = keepMounted ?? contextProps.keepMounted;
    const isActive = id === activeKey;
    const onDeleteCallback = useEvent(() => {
        onDelete?.(id);
    });
    const onChangeCallback = useEvent(() => {
        onChange?.(id);
    });
    const isCardType = type === 'card';
    const isDeletable = !!onDelete;
    useLayoutEffect(() => {
        if (prerender || isActive) {
            setTabContent?.(id, {
                content: children,
                prerender: prerender ?? false,
                keepMounted: keepMounted ?? false,
            });
        }
        else if (!keepMounted) {
            setTabContent?.(id, null);
        }
    }, [children, isActive, keepMounted, prerender, setTabContent]);
    useLayoutEffect(() => {
        return () => {
            setTabContent?.(id, null);
        };
    }, []);
    const mods = useMemo(() => ({ card: isCardType, active: isActive, deletable: isDeletable, disabled: isDisabled }), [isCardType, isActive, isDeletable, isDisabled]);
    useEffect(() => {
        if (ref.current && isActive) {
            ref.current.UNSAFE_getDOMNode()?.scrollIntoView?.();
        }
    }, [isActive]);
    return (_jsxs(TabContainer, { mods: mods, children: [_jsx(TabElement, { ref: ref, qa: qa ?? `Tab-${id}`, qaVal: qaVal, isDisabled: isDisabled, styles: styles, mods: mods, "data-size": size, onPress: onChangeCallback, children: title }), onDelete && _jsx(TabCloseButton, { onPress: onDeleteCallback })] }));
}
Tabs.Tab = Tab;
//# sourceMappingURL=Tabs.js.map