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, StyledContent, base } from "./HorizontalIconTabItem.styles";
export const horizontalIconTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
        const { size, view, children, selected, disabled = false, actionContent, itemIndex, tabIndex, className, onIndexChange, onClick, isActive, animated = true, ...rest } = props;
        const innerRef = useRef(null);
        const ref = useForkRef(outerRef, innerRef);
        const refs = useContext(TabsContext);
        const role = 'tab';
        const animatedClass = animated ? classes.tabItemAnimated : undefined;
        const selectedClass = isActive || 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, animatedClass, 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 horizontalIconTabItemConfig = {
    name: 'HorizontalIconTabItem',
    tag: 'button',
    layout: horizontalIconTabItemRoot,
    base,
    variations: {
        size: {
            css: sizeCSS
        },
        view: {
            css: viewCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        }
    },
    defaults: {
        view: 'default'
    }
};
