import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useRef } from 'react';
import { cx } from '../../../../../../utils/index.js';
import { classes } from '../../../../Select.tokens.js';
import { useSelectContext } from '../../../../Select.context.js';
import { Wrapper, IconWrapper, StyledCheckboxWrapper, StyledCheckbox, StyledIndicator, StyledIconDone, StyledText, StyledCell, DisclosureIconWrapper, StyledArrow } from './Item.styles.js';
import { useDidMountEffect } from '../../../../../../hooks/useDidMountEffect.js';
import { getItemId } from '../../../../utils/getItemId.js';
import { mapCheckedVariants } from '../../../../utils/mapCheckedVariants.js';
import { sizeToIconSize } from '../../../../utils/sizeToIconSize.js';
import { isEmpty } from '../../../../../../utils/isEmpty.js';

var _StyledIndicator;
var _excluded = ["value", "label", "disabled", "contentLeft", "contentRight", "className"];
var Item = function Item(_ref) {
  var item = _ref.item,
    path = _ref.path,
    currentLevel = _ref.currentLevel,
    index = _ref.index,
    ariaControls = _ref.ariaControls,
    ariaExpanded = _ref.ariaExpanded,
    ariaLevel = _ref.ariaLevel,
    ariaLabel = _ref.ariaLabel;
  var value = item.value,
    label = item.label,
    disabled = item.disabled,
    contentLeft = item.contentLeft,
    contentRight = item.contentRight,
    className = item.className,
    rest = _objectWithoutProperties(item, _excluded);
  var ref = useRef(null);
  var _useSelectContext = useSelectContext(),
    focusedPath = _useSelectContext.focusedPath,
    checked = _useSelectContext.checked,
    multiselect = _useSelectContext.multiselect,
    size = _useSelectContext.size,
    handleCheckboxChange = _useSelectContext.handleCheckboxChange,
    handleItemClick = _useSelectContext.handleItemClick,
    variant = _useSelectContext.variant,
    renderItem = _useSelectContext.renderItem,
    renderSelectionIcon = _useSelectContext.renderSelectionIcon,
    treeId = _useSelectContext.treeId,
    singleLine = _useSelectContext.singleLine,
    _checkboxAppearance = _useSelectContext._checkboxAppearance;
  var checkedValue = checked.get(item.value) || false;
  var disabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined;
  var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
  var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? classes.dropdownItemIsActive : undefined;
  useDidMountEffect(function () {
    if (focusedClass && ref !== null && ref !== void 0 && ref.current) {
      ref.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'center'
      });
    }
  }, [focusedClass]);
  var handleChange = function handleChange(e) {
    if (disabled) return;
    e.stopPropagation();
    handleCheckboxChange(item);
  };
  var handleClick = function handleClick(e) {
    if (disabled) {
      e.stopPropagation();
      return;
    }
    handleItemClick(item, e);
  };
  return /*#__PURE__*/React__default.createElement(Wrapper, _extends({}, rest, {
    className: cx(disabledClassName, focusedClass, activeClass, className),
    id: getItemId(treeId, value.toString()),
    ref: ref,
    onClick: handleClick,
    variant: variant,
    role: "treeitem",
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-level": ariaLevel,
    "aria-label": ariaLabel,
    "aria-selected": Boolean(checkedValue)
  }), /*#__PURE__*/React__default.createElement(IconWrapper, {
    variant: variant
  }, renderSelectionIcon ? renderSelectionIcon(mapCheckedVariants(checkedValue, multiselect)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, multiselect && /*#__PURE__*/React__default.createElement(StyledCheckboxWrapper, {
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, /*#__PURE__*/React__default.createElement(StyledCheckbox, {
    disabled: disabled,
    checked: Boolean(checkedValue),
    indeterminate: checkedValue === 'indeterminate',
    onChange: handleChange,
    appearance: _checkboxAppearance !== null && _checkboxAppearance !== void 0 ? _checkboxAppearance : 'default'
  })), !multiselect && checkedValue === 'dot' && (_StyledIndicator || (_StyledIndicator = /*#__PURE__*/React__default.createElement(StyledIndicator, {
    size: "s",
    view: "default"
  }))), !multiselect && checkedValue === 'done' && /*#__PURE__*/React__default.createElement(StyledIconDone, {
    size: sizeToIconSize(size, variant),
    color: "inherit"
  }))), renderItem ? /*#__PURE__*/React__default.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React__default.createElement(StyledCell, {
    contentLeft: contentLeft,
    contentRight: contentRight,
    title: label,
    className: singleLine ? classes.singleLineMode : ''
  }), !isEmpty(item.items) && /*#__PURE__*/React__default.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React__default.createElement(StyledArrow, {
    size: sizeToIconSize(size, variant),
    color: "inherit"
  })));
};

export { Item };
