import React, { useRef } from "react";
import { cx, isEmpty } from "../../../../../../utils";
import { useDidMountEffect } from "../../../../../../hooks";
import { sizeToIconSize, getItemId, mapCheckedVariants } from "../../../../utils";
import { classes } from "../../../../Select.tokens";
import { useSelectContext } from "../../../../Select.context";
import { StyledCell, StyledCheckbox, StyledIndicator, DisclosureIconWrapper, IconWrapper, StyledText, Wrapper, StyledCheckboxWrapper, StyledArrow, StyledIconDone } from "./Item.styles";
export const Item = ({ item, path, currentLevel, index, ariaControls, ariaExpanded, ariaLevel, ariaLabel })=>{
    const { value, label, disabled, contentLeft, contentRight, className, ...rest } = item;
    const ref = useRef(null);
    const { focusedPath, checked, multiselect, size, handleCheckboxChange, handleItemClick, variant, renderItem, renderSelectionIcon, treeId, singleLine, _checkboxAppearance } = useSelectContext();
    const checkedValue = checked.get(item.value) || false;
    const disabledClassName = 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;
    useDidMountEffect(()=>{
        if (focusedClass && ref?.current) {
            ref.current.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
                inline: 'center'
            });
        }
    }, [
        focusedClass
    ]);
    const handleChange = (e)=>{
        if (disabled) return;
        e.stopPropagation();
        handleCheckboxChange(item);
    };
    const handleClick = (e)=>{
        if (disabled) {
            e.stopPropagation();
            return;
        }
        handleItemClick(item, e);
    };
    return /*#__PURE__*/ React.createElement(Wrapper, {
        ...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.createElement(IconWrapper, {
        variant: variant
    }, renderSelectionIcon ? renderSelectionIcon(mapCheckedVariants(checkedValue, multiselect)) : /*#__PURE__*/ React.createElement(React.Fragment, null, multiselect && /*#__PURE__*/ React.createElement(StyledCheckboxWrapper, {
        onClick: (e)=>e.stopPropagation()
    }, /*#__PURE__*/ React.createElement(StyledCheckbox, {
        disabled: disabled,
        checked: Boolean(checkedValue),
        indeterminate: checkedValue === 'indeterminate',
        onChange: handleChange,
        appearance: _checkboxAppearance ?? 'default'
    })), !multiselect && checkedValue === 'dot' && /*#__PURE__*/ React.createElement(StyledIndicator, {
        size: "s",
        view: "default"
    }), !multiselect && checkedValue === 'done' && /*#__PURE__*/ React.createElement(StyledIconDone, {
        size: sizeToIconSize(size, variant),
        color: "inherit"
    }))), renderItem ? /*#__PURE__*/ React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/ React.createElement(StyledCell, {
        contentLeft: contentLeft,
        contentRight: contentRight,
        title: label,
        className: singleLine ? classes.singleLineMode : ''
    }), !isEmpty(item.items) && /*#__PURE__*/ React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/ React.createElement(StyledArrow, {
        size: sizeToIconSize(size, variant),
        color: "inherit"
    })));
};
