'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../../../../utils/index.js');
var useTabItem = require('../../../hooks/useTabItem.js');
var tokens = require('../../../tokens.js');
var VerticalTabItem_styles = require('./VerticalTabItem.styles.js');
var base$1 = require('./variations/_view/base.js');
var base = require('./variations/_size/base.js');
var base$2 = require('./variations/_disabled/base.js');
var useForkRef = require('../../../../../hooks/useForkRef.js');
var TabsContext = require('../../../TabsContext.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

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

exports.verticalTabItemConfig = verticalTabItemConfig;
exports.verticalTabItemRoot = verticalTabItemRoot;
