import React, { forwardRef, useRef, useContext } from "react";
import { useForkRef } from "../../../../../hooks";
import { cx } from "../../../../../utils";
import { TabsContext } from "../../..";
import { useTabItem } from "../../../hooks/useTabItem";
import { classes } from "../../../tokens";
import { ActionContent, base, LeftContent, RightContent, StyledContent, TabItemValue } from "./VerticalTabItem.styles";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base as disabledCSS } from "./variations/_disabled/base";
export const verticalTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
        const { size, view, selected, disabled = false, children, value, contentLeft, contentRight, actionContent, onIndexChange, itemIndex, tabIndex, className, onClick, maxItemWidth: maxWidth = 'auto', ...rest } = props;
        const innerRef = useRef(null);
        const ref = useForkRef(outerRef, innerRef);
        const refs = useContext(TabsContext);
        const role = 'tab';
        const selectedClass = selected ? classes.selectedTabsItem : undefined;
        const truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;
        const { hasKeyNavigation, navigationTabIndex, onItemFocus, handleClick } = useTabItem({
            refs,
            innerRef,
            itemIndex,
            selected,
            disabled,
            onIndexChange,
            onClick,
            orientation: rest.orientation
        });
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            disabled: disabled,
            role: role,
            view: view,
            size: size,
            onFocus: onItemFocus,
            tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
            className: cx(selectedClass, truncateClass, className),
            onClick: handleClick,
            ...rest,
            style: {
                ...rest.style,
                maxWidth
            }
        }, /*#__PURE__*/ React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/ React.createElement(LeftContent, {
            className: classes.tabLeftContent
        }, contentLeft), /*#__PURE__*/ React.createElement(StyledContent, {
            className: classes.tabContent
        }, children), !contentRight && value && /*#__PURE__*/ React.createElement(TabItemValue, null, value), !value && contentRight && /*#__PURE__*/ React.createElement(RightContent, {
            className: classes.tabRightContent
        }, contentRight), actionContent && /*#__PURE__*/ React.createElement(ActionContent, null, actionContent)));
    });
export const verticalTabItemConfig = {
    name: 'VerticalTabItem',
    tag: 'button',
    layout: verticalTabItemRoot,
    base,
    variations: {
        size: {
            css: sizeCSS
        },
        view: {
            css: viewCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        }
    },
    defaults: {
        view: 'divider'
    }
};
