import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useMemo } from 'react';
import { cx } from '../../../../utils/index.js';
import { classes } from '../../tokens.js';
import { useSegmentInner } from '../../SegmentProvider/SegmentProvider.js';
import { base as base$1 } from './variations/_size/base.js';
import { base as base$2 } from './variations/_view/base.js';
import { base as base$3 } from './variations/_disabled/base.js';
import { base as base$4 } from './variations/_pilled/base.js';
import { LeftContent, StyledContent, RightContent, base } from './SegmentItem.styles.js';
import { safeUseId } from '../../../../utils/react.js';
import { extractTextFrom } from '../../../../utils/extractTextFrom.js';

var _excluded = ["style", "size", "view", "className", "id", "label", "value", "pilled", "contentLeft", "contentRight", "maxItemWidth", "customHandleSelect", "aria-label"];
var segmentItemRoot = function segmentItemRoot(Root) {
  return /*#__PURE__*/forwardRef(function (props, outerRef) {
    var style = props.style,
      size = props.size,
      _props$view = props.view,
      view = _props$view === void 0 ? 'default' : _props$view,
      className = props.className,
      id = props.id,
      label = props.label,
      value = props.value,
      pilled = props.pilled,
      contentLeft = props.contentLeft,
      contentRight = props.contentRight,
      _props$maxItemWidth = props.maxItemWidth,
      maxWidth = _props$maxItemWidth === void 0 ? 'auto' : _props$maxItemWidth,
      customHandleSelect = props.customHandleSelect,
      ariaLabelExternal = props['aria-label'],
      rest = _objectWithoutProperties(props, _excluded);
    var _useSegmentInner = useSegmentInner(),
      disabledGroup = _useSegmentInner.disabledGroup,
      handleSelect = _useSegmentInner.handleSelect,
      selectedSegmentItems = _useSegmentInner.selectedSegmentItems;
    var uniqId = safeUseId();
    var segmentId = id || "label-".concat(uniqId);
    var ariaLabelDefault = useMemo(function () {
      return extractTextFrom(label);
    }, [label]);
    var pilledClass = pilled ? classes.segmentPilled : undefined;
    var xsSize = size === 'xs' ? classes.segmentXsSize : undefined;
    var truncateClass = maxWidth !== 'auto' ? classes.segmentTruncate : undefined;
    var isSelected = selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.includes(value || ariaLabelDefault);
    var selectedClass = isSelected ? classes.selectedSegmentItem : undefined;
    var handleSelectSegment = function handleSelectSegment(event) {
      if (disabledGroup) {
        return;
      }
      customHandleSelect === null || customHandleSelect === void 0 || customHandleSelect(event);
      handleSelect === null || handleSelect === void 0 || handleSelect(value || ariaLabelDefault);
    };
    return /*#__PURE__*/React__default.createElement(Root, _extends({
      view: view,
      size: size,
      id: segmentId,
      ref: outerRef,
      "aria-label": ariaLabelExternal || ariaLabelDefault,
      value: value,
      pilled: pilled,
      className: cx(selectedClass, pilledClass, xsSize, truncateClass, className),
      onClick: handleSelectSegment,
      tabIndex: disabledGroup ? -1 : 0,
      disabled: disabledGroup,
      style: _objectSpread2(_objectSpread2({}, style), {}, {
        maxWidth: maxWidth
      })
    }, rest), contentLeft && /*#__PURE__*/React__default.createElement(LeftContent, null, contentLeft), /*#__PURE__*/React__default.createElement(StyledContent, null, label || value), contentRight && /*#__PURE__*/React__default.createElement(RightContent, {
      className: typeof contentRight === 'string' ? classes.segmentAdditionalText : ''
    }, contentRight));
  });
};
var segmentItemConfig = {
  name: 'SegmentItem',
  tag: 'button',
  layout: segmentItemRoot,
  base: base,
  variations: {
    size: {
      css: base$1
    },
    view: {
      css: base$2
    },
    disabled: {
      css: base$3,
      attrs: true
    },
    pilled: {
      css: base$4,
      attrs: true
    }
  },
  defaults: {
    view: 'default',
    size: 'xs'
  }
};

export { segmentItemConfig, segmentItemRoot };
