import React, { useRef } from "react";
import { isArraysEqual, cx } from "../../../../../../utils";
import { useDidMountEffect } from "../../../../../../hooks";
import { classes } from "../../../../Select.tokens";
import { sizeToIconSize } from "../../../../utils";
import { keyExists } from "../../../../reducers/treePathReducer";
import { useSelectContext } from "../../../../Select.context";
import { ItemWrapper, ChildItems, Offset, IconWrapper, StyledCheckboxWrapper, StyledCheckbox, StyledIndicator, StyledIconDone, StyledText, StyledCell, DisclosureIconWrapper, StyledArrowRight, Wrapper, StyledArrowLeft } from "./Item.styles";
export const Item = ({ item, pathToItem })=>{
    const { label, value, disabled, contentLeft, contentRight } = item;
    const isLeaf = !item?.items;
    const { checked, multiselect, size, variant, renderItem, _checkboxAppearance, focusedPath, treePath, dispatchTreePath, arrowPlacement, handleItemClick, handleCheckboxChange, valueToPathMap, singleLine } = useSelectContext();
    const disabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined;
    const ref = useRef(null);
    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 (disabled) {
            return;
        }
        if (!isLeaf) {
            dispatchTreePath({
                type: 'toggled_level',
                value: valueToPathMap.get(value.toString()) || []
            });
        }
        if (handleItemClick) {
            handleItemClick(item, e);
        }
    };
    const handleChange = (e)=>{
        if (disabled) {
            return;
        }
        e.stopPropagation();
        handleCheckboxChange(item);
    };
    useDidMountEffect(()=>{
        if (focusedClass && ref?.current) {
            ref.current.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
                inline: 'center'
            });
        }
    }, [
        focusedClass
    ]);
    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
    })), multiselect && /*#__PURE__*/ React.createElement(IconWrapper, {
        variant: variant
    }, /*#__PURE__*/ React.createElement(StyledCheckboxWrapper, {
        onClick: (e)=>e.stopPropagation()
    }, /*#__PURE__*/ React.createElement(StyledCheckbox, {
        disabled: disabled,
        checked: Boolean(checked.get(item.value)),
        indeterminate: checked.get(item.value) === 'indeterminate',
        onChange: handleChange,
        appearance: _checkboxAppearance ?? 'default'
    }))), !multiselect && arrowPlacement === 'right' && /*#__PURE__*/ React.createElement(IconWrapper, {
        variant: variant
    }, checked.get(item.value) === 'dot' && /*#__PURE__*/ React.createElement(StyledIndicator, {
        size: "s",
        view: "default"
    }), checked.get(item.value) === '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 : ''
    }), !multiselect && arrowPlacement === 'left' && /*#__PURE__*/ React.createElement(IconWrapper, {
        variant: variant
    }, checked.get(item.value) === 'dot' && /*#__PURE__*/ React.createElement(StyledIndicator, {
        size: "s",
        view: "default"
    }), checked.get(item.value) === 'done' && /*#__PURE__*/ React.createElement(StyledIconDone, {
        size: sizeToIconSize(size, variant),
        color: "inherit"
    })), 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
            ]
        });
    })));
};
