import React, { forwardRef, useRef, useContext } from "react";
import { useForkRef } from "../../../../../hooks";
import { cx } from "../../../../../utils";
import { TabsContext } from "../../..";
import { classes } from "../../../tokens";
import { useTabItem } from "../../../hooks/useTabItem";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base as disabledCSS } from "./variations/_disabled/base";
import { ActionContent, base, StyledContent } from "./VerticalIconTabItem.styles";
export const verticalIconTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
        const { size, view, selected, disabled = false, children, actionContent, itemIndex, tabIndex, className, onIndexChange, onClick, ...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 { hasKeyNavigation, navigationTabIndex, onItemFocus, handleClick } = useTabItem({
            refs,
            innerRef,
            itemIndex,
            selected,
            disabled,
            onIndexChange,
            onClick,
            orientation: rest.orientation
        });
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            className: cx(selectedClass, className),
            disabled: disabled,
            role: role,
            view: view,
            size: size,
            tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
            onFocus: onItemFocus,
            onClick: handleClick,
            ...rest
        }, /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StyledContent, {
            className: classes.tabContent
        }, children), actionContent && /*#__PURE__*/ React.createElement(ActionContent, null, actionContent)));
    });
export const verticalIconTabItemConfig = {
    name: 'VerticalTabItem',
    tag: 'button',
    layout: verticalIconTabItemRoot,
    base,
    variations: {
        size: {
            css: sizeCSS
        },
        view: {
            css: viewCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        }
    },
    defaults: {
        view: 'divider'
    }
};
