'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 tokens = require('../../../tokens.js');
var useTabItem = require('../../../hooks/useTabItem.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 HorizontalIconTabItem_styles = require('./HorizontalIconTabItem.styles.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", "children", "selected", "disabled", "actionContent", "itemIndex", "tabIndex", "className", "onIndexChange", "onClick", "isActive", "animated"];
var horizontalIconTabItemRoot = function horizontalIconTabItemRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
    var size = props.size,
      view = props.view,
      children = props.children,
      selected = props.selected,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      actionContent = props.actionContent,
      itemIndex = props.itemIndex,
      tabIndex = props.tabIndex,
      className = props.className,
      onIndexChange = props.onIndexChange,
      onClick = props.onClick,
      isActive = props.isActive,
      _props$animated = props.animated,
      animated = _props$animated === void 0 ? true : _props$animated,
      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 animatedClass = animated ? tokens.classes.tabItemAnimated : undefined;
    var selectedClass = isActive || selected ? tokens.classes.selectedTabsItem : 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,
      className: index.cx(selectedClass, animatedClass, className),
      disabled: disabled,
      role: role,
      view: view,
      size: size,
      tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
      onFocus: onItemFocus,
      onClick: handleClick
    }, rest), /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(HorizontalIconTabItem_styles.StyledContent, {
      className: tokens.classes.tabContent
    }, children), actionContent && /*#__PURE__*/React__default.default.createElement(HorizontalIconTabItem_styles.ActionContent, null, actionContent)));
  });
};
var horizontalIconTabItemConfig = {
  name: 'HorizontalIconTabItem',
  tag: 'button',
  layout: horizontalIconTabItemRoot,
  base: HorizontalIconTabItem_styles.base,
  variations: {
    size: {
      css: base.base
    },
    view: {
      css: base$1.base
    },
    disabled: {
      css: base$2.base,
      attrs: true
    }
  },
  defaults: {
    view: 'default'
  }
};

exports.horizontalIconTabItemConfig = horizontalIconTabItemConfig;
exports.horizontalIconTabItemRoot = horizontalIconTabItemRoot;
