import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useRef, useContext } from 'react';
import { cx } from '../../../../../utils/index.js';
import { useTabItem } from '../../../hooks/useTabItem.js';
import { classes } from '../../../tokens.js';
import { LeftContent, StyledContent, TabItemValue, RightContent, ActionContent, base } from './VerticalTabItem.styles.js';
import { base as base$2 } from './variations/_view/base.js';
import { base as base$1 } from './variations/_size/base.js';
import { base as base$3 } from './variations/_disabled/base.js';
import { useForkRef } from '../../../../../hooks/useForkRef.js';
import { TabsContext } from '../../../TabsContext.js';

var _excluded = ["size", "view", "selected", "disabled", "children", "value", "contentLeft", "contentRight", "actionContent", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick", "maxItemWidth"];
var verticalTabItemRoot = function verticalTabItemRoot(Root) {
  return /*#__PURE__*/forwardRef(function (props, outerRef) {
    var size = props.size,
      view = props.view,
      selected = props.selected,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      children = props.children,
      value = props.value,
      contentLeft = props.contentLeft,
      contentRight = props.contentRight,
      actionContent = props.actionContent,
      onIndexChange = props.onIndexChange,
      itemIndex = props.itemIndex,
      tabIndex = props.tabIndex,
      className = props.className,
      onClick = props.onClick,
      _props$maxItemWidth = props.maxItemWidth,
      maxWidth = _props$maxItemWidth === void 0 ? 'auto' : _props$maxItemWidth,
      rest = _objectWithoutProperties(props, _excluded);
    var innerRef = useRef(null);
    var ref = useForkRef(outerRef, innerRef);
    var refs = useContext(TabsContext);
    var role = 'tab';
    var selectedClass = selected ? classes.selectedTabsItem : undefined;
    var truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;
    var _useTabItem = useTabItem({
        refs: refs,
        innerRef: innerRef,
        itemIndex: itemIndex,
        selected: selected,
        disabled: disabled,
        onIndexChange: onIndexChange,
        onClick: onClick,
        orientation: rest.orientation
      }),
      hasKeyNavigation = _useTabItem.hasKeyNavigation,
      navigationTabIndex = _useTabItem.navigationTabIndex,
      onItemFocus = _useTabItem.onItemFocus,
      handleClick = _useTabItem.handleClick;
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      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: _objectSpread2(_objectSpread2({}, rest.style), {}, {
        maxWidth: maxWidth
      })
    }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, contentLeft && /*#__PURE__*/React__default.createElement(LeftContent, {
      className: classes.tabLeftContent
    }, contentLeft), /*#__PURE__*/React__default.createElement(StyledContent, {
      className: classes.tabContent
    }, children), !contentRight && value && /*#__PURE__*/React__default.createElement(TabItemValue, null, value), !value && contentRight && /*#__PURE__*/React__default.createElement(RightContent, {
      className: classes.tabRightContent
    }, contentRight), actionContent && /*#__PURE__*/React__default.createElement(ActionContent, null, actionContent)));
  });
};
var verticalTabItemConfig = {
  name: 'VerticalTabItem',
  tag: 'button',
  layout: verticalTabItemRoot,
  base: base,
  variations: {
    size: {
      css: base$1
    },
    view: {
      css: base$2
    },
    disabled: {
      css: base$3,
      attrs: true
    }
  },
  defaults: {
    view: 'divider'
  }
};

export { verticalTabItemConfig, verticalTabItemRoot };
