import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useContext } from 'react';
import { useSidebarContext } from '../../../../LibrariesSidebar/context';
import { useSidebarColors } from '../../../../LibrariesSidebar/hooks/useGetSidebarColors';
import { AVATAR_STYLES, getRootRowSx, } from '../../../../LibrariesSidebar/styles';
import { getAvatarConfig } from '../../../../LibrariesSidebar/utils';
import { ItemContext } from '../../../../SortableListComposition';
import ListItem from '../../../../../design-system/List/components/ListItem';
import Stack from '@mui/material/Stack';
import { IconChevronRight } from '@tabler/icons-react';
import { DragIcon } from '../../DragIcon';
const SortableRootRowComponent = ({ item }) => {
    const colors = useSidebarColors();
    const { onItemClick, isSortMode } = useSidebarContext();
    const isDragging = useContext(ItemContext)?.isDragging ?? false;
    const handleClick = () => {
        if (!item || isSortMode)
            return;
        onItemClick?.(item);
    };
    return (_jsxs(Stack, { sx: getRootRowSx(colors, isSortMode, isDragging), children: [_jsx(DragIcon, {}), _jsx(ListItem, { component: "div", onClick: isSortMode ? undefined : handleClick, text: { title: item.title }, avatar: getAvatarConfig(item), action: { Icon: IconChevronRight, onClick: handleClick }, sx: { width: '100%' }, slotProps: {
                    avatar: { sx: AVATAR_STYLES },
                    container: { sx: { py: 1.5 } },
                    title: {
                        slotProps: {
                            title: {
                                sx: { color: colors.TITLE_COLOR },
                                overflow: 'tooltip',
                                withEllipsis: true,
                            },
                        },
                    },
                } }, item.id)] }));
};
export const SortableRootRow = memo(SortableRootRowComponent);
