import React, { useContext, useRef } from "react";
import { useDidMountEffect } from "../../../../../../hooks";
import { isArraysEqual, cx } from "../../../../../../utils";
import { sizeToIconSize } from "../../../../utils";
import { classes } from "../../../../Combobox.tokens";
import { keyExists } from "../../../../reducers/treePathReducer";
import { Context } from "../../../../Combobox.context";
import { ItemContent, ItemSelectionIcon } from "../../../ItemView/ItemView";
import { ItemWrapper, ChildItems, Offset, DisclosureIconWrapper, StyledArrowRight, Wrapper, StyledArrowLeft } from "./Item.styles";
export const Item = ({ item, pathToItem })=>{
    const { value, disabled } = item;
    const isLeaf = !item?.items;
    const { checked, multiple, size, variant, renderItem, renderSelectionIcon, // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    _checkboxAppearance, focusedPath, treePath, dispatchTreePath, arrowPlacement, handleItemClick, handleCheckboxChange, valueToPathMap, singleLine } = useContext(Context);
    const ref = useRef(null);
    const itemDisabled = disabled;
    const disabledClassName = itemDisabled ? classes.dropdownItemIsDisabled : undefined;
    const checkedValue = checked.get(item.value) || false;
    const currentItemDepth = (valueToPathMap.get(item.value.toString())?.length || 0) - 1;
    const isCurrentLevelOpened = keyExists(treePath, valueToPathMap.get(value.toString()) || []);
    const withArrowInverse = isCurrentLevelOpened ? classes.arrowInverse : undefined;
    const focusedClass = isArraysEqual(pathToItem, focusedPath) ? classes.dropdownItemIsFocused : undefined;
    const handleClick = (e)=>{
        if (itemDisabled) return;
        if (!isLeaf) {
            dispatchTreePath({
                type: 'toggled_level',
                value: valueToPathMap.get(value.toString()) || []
            });
        }
        if (handleItemClick) {
            handleItemClick(item, e);
        }
    };
    const handleChange = (e)=>{
        if (itemDisabled) return;
        e.stopPropagation();
        handleCheckboxChange(item);
    };
    useDidMountEffect(()=>{
        if (focusedClass && ref?.current) {
            ref.current.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
                inline: 'center'
            });
        }
    }, [
        focusedClass
    ]);
    const itemSelectionIcon = /*#__PURE__*/ React.createElement(ItemSelectionIcon, {
        checked: checkedValue,
        disabled: itemDisabled,
        multiple: multiple,
        size: size,
        variant: variant,
        renderSelectionIcon: renderSelectionIcon,
        checkboxAppearance: _checkboxAppearance,
        onChange: handleChange
    });
    return /*#__PURE__*/ React.createElement(ItemWrapper, null, /*#__PURE__*/ React.createElement(Wrapper, {
        ref: ref,
        className: cx(focusedClass, disabledClassName),
        onClick: handleClick,
        variant: variant,
        role: "treeitem"
    }, /*#__PURE__*/ React.createElement(Offset, {
        depth: currentItemDepth
    }), arrowPlacement === 'left' && /*#__PURE__*/ React.createElement(DisclosureIconWrapper, {
        visibility: isLeaf ? 'hidden' : 'visible'
    }, /*#__PURE__*/ React.createElement(StyledArrowLeft, {
        size: sizeToIconSize(size, variant),
        color: "inherit",
        className: withArrowInverse
    })), multiple && itemSelectionIcon, !multiple && arrowPlacement === 'right' && itemSelectionIcon, /*#__PURE__*/ React.createElement(ItemContent, {
        item: item,
        renderItem: renderItem,
        singleLine: singleLine
    }), !multiple && arrowPlacement === 'left' && itemSelectionIcon, arrowPlacement === 'right' && /*#__PURE__*/ React.createElement(DisclosureIconWrapper, {
        visibility: isLeaf ? 'hidden' : 'visible'
    }, /*#__PURE__*/ React.createElement(StyledArrowRight, {
        size: sizeToIconSize(size, variant),
        color: "inherit",
        className: withArrowInverse
    }))), !isLeaf && isCurrentLevelOpened && /*#__PURE__*/ React.createElement(ChildItems, null, item.items?.map((item, index)=>{
        return /*#__PURE__*/ React.createElement(Item, {
            item: item,
            key: item.value,
            pathToItem: [
                ...pathToItem,
                index
            ]
        });
    })));
};
