import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useContext, useState } from 'react';
import { SidebarAddItemButton } from '../../../../LibrariesSidebar/components/create/SidebarAddItemButton';
import { SidebarChildrenList } from '../../../../LibrariesSidebar/components/list/children/SidebarChildrenList';
import { useSidebarContext } from '../../../../LibrariesSidebar/context';
import { useSidebarColors } from '../../../../LibrariesSidebar/hooks/useGetSidebarColors';
import { getChildRowContainerSx, getChildRowDetailsSx, getChildRowSummarySx, getChildRowTitleSx, getCollapseIconSx, } from '../../../../LibrariesSidebar/styles';
import { getAvatarConfig } from '../../../../LibrariesSidebar/utils';
import { ItemContext } from '../../../../SortableListComposition';
import { TextOverflowTip } from '../../../../TextOverflowTip';
import Avatar from '../../../../../design-system/Avatar';
import { Box, Collapse, IconButton, Stack } from '@mui/material';
import { IconChevronDown } from '@tabler/icons-react';
const SidebarChildRowComponent = ({ item, depth, onAdd, }) => {
    const colors = useSidebarColors();
    const isDragging = useContext(ItemContext)?.isDragging ?? false;
    const { onItemClick, onAddMouseEnter, isSortMode, expandedIds, setRowExpanded, } = useSidebarContext();
    const [expanded, setExpanded] = useState(() => expandedIds.has(item.id));
    const [hovering, setHovering] = useState(false);
    const isNested = depth > 0;
    const showDragIcon = hovering && isSortMode;
    // Only leaves that can't grow hide the toggle; children stay reachable at limit.
    const hideExpand = !item.hasChildren && Boolean(item.hasReachedLimit || item.hideCreateButton);
    const showCreateButton = !item.hasReachedLimit && !item.hideCreateButton;
    const handleSummaryClick = () => {
        if (isSortMode)
            return;
        onItemClick?.(item);
    };
    const handleToggle = (e) => {
        e.stopPropagation();
        setExpanded(prev => {
            const next = !prev;
            setRowExpanded(item.id, next);
            return next;
        });
    };
    return (_jsxs(Stack, { sx: getChildRowContainerSx(colors, isNested, isSortMode, isDragging), children: [_jsxs(Stack, { className: "accordion-summary", onClick: handleSummaryClick, onMouseEnter: isSortMode ? () => setHovering(true) : undefined, onMouseLeave: isSortMode ? () => setHovering(false) : undefined, sx: getChildRowSummarySx(colors, {
                    depth,
                    isNested,
                    expanded,
                    isSortMode,
                    isDragging,
                    showDragIcon,
                }), children: [_jsx(Avatar, { ...getAvatarConfig(item, showDragIcon) }), _jsx(TextOverflowTip, { primary: item.title, slotProps: {
                            typography: {
                                variant: 'globalS',
                                fontWeight: 'semiBold',
                                sx: getChildRowTitleSx(colors),
                            },
                        } }), !hideExpand && (_jsx(IconButton, { className: "accordion-collapse-icon", size: "small", onClick: handleToggle, sx: getCollapseIconSx(colors, expanded), children: _jsx(IconChevronDown, {}) }))] }), !hideExpand && (_jsx(Collapse, { in: expanded, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { className: "accordion-details-custom-detail", sx: getChildRowDetailsSx(colors, isNested), children: [_jsx(SidebarChildrenList, { depth: depth + 1, parentId: item.id, onAdd: onAdd }), showCreateButton && (_jsx(SidebarAddItemButton, { onAddMouseEnter: () => onAddMouseEnter?.(item.id), onAdd: () => onAdd?.(item.id), depth: depth, hasChildren: item.hasChildren }))] }) }))] }));
};
export const SidebarChildRow = memo(SidebarChildRowComponent);
