import React, { useEffect, useRef, useContext } from "react";
import cls from "classnames";
import { Context } from "../../../../Dropdown.context";
import { getItemId } from "../../../../utils";
import { classes } from "../../../../Dropdown.tokens";
import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell, RenderItemWrapper, StyledIconDisclosureRight } from "./Item.styles";
export const Item = ({ item, path, currentLevel, index, ariaControls, ariaExpanded, ariaLevel, ariaLabel })=>{
    const { value, label, disabled, contentLeft, contentRight, dividerBefore, dividerAfter, className, ...rest } = item;
    const ref = useRef(null);
    const { focusedPath, size, variant, itemRole, handleGlobalToggle, closeOnSelect, onHover, onItemSelect, treeId, renderItem } = useContext(Context);
    const hasDescendants = Boolean(item.items?.length);
    const disclosureIconSize = size === 'xs' ? 'xs' : 's';
    const isDisabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined;
    const focusedClass = currentLevel === focusedPath.length - 1 && index === focusedPath?.[currentLevel] ? classes.dropdownItemIsFocused : undefined;
    const activeClass = value === path?.[currentLevel + 1] ? classes.dropdownItemIsActive : undefined;
    useEffect(()=>{
        if (focusedClass && ref?.current) {
            ref.current.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
                inline: 'center'
            });
        }
    }, [
        focusedClass
    ]);
    const handleClick = (event)=>{
        if (disabled) {
            event.stopPropagation();
            return;
        }
        if (onItemSelect) {
            onItemSelect(item, event);
        }
        // Закрываем весь дропдаун целиком при клике на айтем без потомков. Только при closeOnSelect === true.
        if (closeOnSelect && !hasDescendants) {
            handleGlobalToggle(false, event);
        }
    };
    const handleHover = ()=>{
        if (onHover) {
            onHover(index, item);
        }
    };
    return /*#__PURE__*/ React.createElement(React.Fragment, null, dividerBefore && /*#__PURE__*/ React.createElement(Divider, {
        variant: variant
    }), /*#__PURE__*/ React.createElement(Wrapper, {
        ...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.createElement(RenderItemWrapper, null, renderItem(item)) : /*#__PURE__*/ React.createElement(CellWrapper, null, /*#__PURE__*/ React.createElement(StyledCell, {
        contentLeft: contentLeft,
        contentRight: contentRight,
        alignContentLeft: "center",
        alignContentRight: "center",
        title: label
    })), hasDescendants && /*#__PURE__*/ React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/ React.createElement(StyledIconDisclosureRight, {
        size: disclosureIconSize,
        color: "inherit"
    }))), dividerAfter && /*#__PURE__*/ React.createElement(Divider, {
        variant: variant
    }));
};
