import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useRef, useContext, useEffect } from 'react';
import cls from 'classnames';
import { Context } from '../../../../Dropdown.context.js';
import { classes } from '../../../../Dropdown.tokens.js';
import { Divider, Wrapper, RenderItemWrapper, CellWrapper, StyledCell, DisclosureIconWrapper, StyledIconDisclosureRight } from './Item.styles.js';
import { getItemId } from '../../../../utils/getItemId.js';

var _excluded = ["value", "label", "disabled", "contentLeft", "contentRight", "dividerBefore", "dividerAfter", "className"];
var Item = function Item(_ref) {
  var _item$items;
  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,
    dividerBefore = item.dividerBefore,
    dividerAfter = item.dividerAfter,
    className = item.className,
    rest = _objectWithoutProperties(item, _excluded);
  var ref = useRef(null);
  var _useContext = useContext(Context),
    focusedPath = _useContext.focusedPath,
    size = _useContext.size,
    variant = _useContext.variant,
    itemRole = _useContext.itemRole,
    handleGlobalToggle = _useContext.handleGlobalToggle,
    closeOnSelect = _useContext.closeOnSelect,
    onHover = _useContext.onHover,
    onItemSelect = _useContext.onItemSelect,
    treeId = _useContext.treeId,
    renderItem = _useContext.renderItem;
  var hasDescendants = Boolean((_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length);
  var disclosureIconSize = size === 'xs' ? 'xs' : 's';
  var isDisabledClassName = 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;
  useEffect(function () {
    if (focusedClass && ref !== null && ref !== void 0 && ref.current) {
      ref.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'center'
      });
    }
  }, [focusedClass]);
  var handleClick = function handleClick(event) {
    if (disabled) {
      event.stopPropagation();
      return;
    }
    if (onItemSelect) {
      onItemSelect(item, event);
    }

    // Закрываем весь дропдаун целиком при клике на айтем без потомков. Только при closeOnSelect === true.
    if (closeOnSelect && !hasDescendants) {
      handleGlobalToggle(false, event);
    }
  };
  var handleHover = function handleHover() {
    if (onHover) {
      onHover(index, item);
    }
  };
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dividerBefore && /*#__PURE__*/React__default.createElement(Divider, {
    variant: variant
  }), /*#__PURE__*/React__default.createElement(Wrapper, _extends({}, rest, {
    ref: ref,
    className: cls(isDisabledClassName, focusedClass, activeClass, className),
    id: getItemId(treeId, value.toString()),
    role: itemRole,
    onClick: handleClick,
    onMouseEnter: handleHover,
    variant: variant,
    "aria-disabled": disabled,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-level": ariaLevel,
    "aria-label": ariaLabel
  }), renderItem ? /*#__PURE__*/React__default.createElement(RenderItemWrapper, null, renderItem(item)) : /*#__PURE__*/React__default.createElement(CellWrapper, null, /*#__PURE__*/React__default.createElement(StyledCell, {
    contentLeft: contentLeft,
    contentRight: contentRight,
    alignContentLeft: "center",
    alignContentRight: "center",
    title: label
  })), hasDescendants && /*#__PURE__*/React__default.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React__default.createElement(StyledIconDisclosureRight, {
    size: disclosureIconSize,
    color: "inherit"
  }))), dividerAfter && /*#__PURE__*/React__default.createElement(Divider, {
    variant: variant
  }));
};

export { Item };
