import { toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useRef } from 'react';
import { cx } from '../../../../../../utils/index.js';
import { classes } from '../../../../Select.tokens.js';
import { keyExists } from '../../../../reducers/treePathReducer.js';
import { useSelectContext } from '../../../../Select.context.js';
import { ItemWrapper, Wrapper, Offset, DisclosureIconWrapper, StyledArrowLeft, IconWrapper, StyledCheckboxWrapper, StyledCheckbox, StyledIndicator, StyledIconDone, StyledText, StyledCell, StyledArrowRight, ChildItems } from './Item.styles.js';
import { isArraysEqual } from '../../../../../../utils/isArraysEqual.js';
import { useDidMountEffect } from '../../../../../../hooks/useDidMountEffect.js';
import { sizeToIconSize } from '../../../../utils/sizeToIconSize.js';

var _StyledIndicator, _StyledIndicator2;
var Item = function Item(_ref) {
  var _valueToPathMap$get, _item$items;
  var item = _ref.item,
    pathToItem = _ref.pathToItem;
  var label = item.label,
    value = item.value,
    disabled = item.disabled,
    contentLeft = item.contentLeft,
    contentRight = item.contentRight;
  var isLeaf = !(item !== null && item !== void 0 && item.items);
  var _useSelectContext = useSelectContext(),
    checked = _useSelectContext.checked,
    multiselect = _useSelectContext.multiselect,
    size = _useSelectContext.size,
    variant = _useSelectContext.variant,
    renderItem = _useSelectContext.renderItem,
    _checkboxAppearance = _useSelectContext._checkboxAppearance,
    focusedPath = _useSelectContext.focusedPath,
    treePath = _useSelectContext.treePath,
    dispatchTreePath = _useSelectContext.dispatchTreePath,
    arrowPlacement = _useSelectContext.arrowPlacement,
    handleItemClick = _useSelectContext.handleItemClick,
    handleCheckboxChange = _useSelectContext.handleCheckboxChange,
    valueToPathMap = _useSelectContext.valueToPathMap,
    singleLine = _useSelectContext.singleLine;
  var disabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined;
  var ref = useRef(null);
  var currentItemDepth = (((_valueToPathMap$get = valueToPathMap.get(item.value.toString())) === null || _valueToPathMap$get === void 0 ? void 0 : _valueToPathMap$get.length) || 0) - 1;
  var isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);
  var withArrowInverse = isCurrentLevelOpened ? classes.arrowInverse : undefined;
  var focusedClass = isArraysEqual(pathToItem, focusedPath) ? classes.dropdownItemIsFocused : undefined;
  var handleClick = function handleClick(e) {
    if (disabled) {
      return;
    }
    if (!isLeaf) {
      dispatchTreePath({
        type: 'toggled_level',
        value: valueToPathMap.get(value.toString()) || []
      });
    }
    if (handleItemClick) {
      handleItemClick(item, e);
    }
  };
  var handleChange = function handleChange(e) {
    if (disabled) {
      return;
    }
    e.stopPropagation();
    handleCheckboxChange(item);
  };
  useDidMountEffect(function () {
    if (focusedClass && ref !== null && ref !== void 0 && ref.current) {
      ref.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'center'
      });
    }
  }, [focusedClass]);
  return /*#__PURE__*/React__default.createElement(ItemWrapper, null, /*#__PURE__*/React__default.createElement(Wrapper, {
    ref: ref,
    className: cx(focusedClass, disabledClassName),
    onClick: handleClick,
    variant: variant,
    role: "treeitem"
  }, /*#__PURE__*/React__default.createElement(Offset, {
    depth: currentItemDepth
  }), arrowPlacement === 'left' && /*#__PURE__*/React__default.createElement(DisclosureIconWrapper, {
    visibility: isLeaf ? 'hidden' : 'visible'
  }, /*#__PURE__*/React__default.createElement(StyledArrowLeft, {
    size: sizeToIconSize(size, variant),
    color: "inherit",
    className: withArrowInverse
  })), multiselect && /*#__PURE__*/React__default.createElement(IconWrapper, {
    variant: variant
  }, /*#__PURE__*/React__default.createElement(StyledCheckboxWrapper, {
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, /*#__PURE__*/React__default.createElement(StyledCheckbox, {
    disabled: disabled,
    checked: Boolean(checked.get(item.value)),
    indeterminate: checked.get(item.value) === 'indeterminate',
    onChange: handleChange,
    appearance: _checkboxAppearance !== null && _checkboxAppearance !== void 0 ? _checkboxAppearance : 'default'
  }))), !multiselect && arrowPlacement === 'right' && /*#__PURE__*/React__default.createElement(IconWrapper, {
    variant: variant
  }, checked.get(item.value) === 'dot' && (_StyledIndicator || (_StyledIndicator = /*#__PURE__*/React__default.createElement(StyledIndicator, {
    size: "s",
    view: "default"
  }))), checked.get(item.value) === '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 : ''
  }), !multiselect && arrowPlacement === 'left' && /*#__PURE__*/React__default.createElement(IconWrapper, {
    variant: variant
  }, checked.get(item.value) === 'dot' && (_StyledIndicator2 || (_StyledIndicator2 = /*#__PURE__*/React__default.createElement(StyledIndicator, {
    size: "s",
    view: "default"
  }))), checked.get(item.value) === 'done' && /*#__PURE__*/React__default.createElement(StyledIconDone, {
    size: sizeToIconSize(size, variant),
    color: "inherit"
  })), arrowPlacement === 'right' && /*#__PURE__*/React__default.createElement(DisclosureIconWrapper, {
    visibility: isLeaf ? 'hidden' : 'visible'
  }, /*#__PURE__*/React__default.createElement(StyledArrowRight, {
    size: sizeToIconSize(size, variant),
    color: "inherit",
    className: withArrowInverse
  }))), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/React__default.createElement(ChildItems, null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.map(function (item, index) {
    return /*#__PURE__*/React__default.createElement(Item, {
      item: item,
      key: item.value,
      pathToItem: [].concat(_toConsumableArray(pathToItem), [index])
    });
  })));
};

export { Item };
