import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import ListItem from '../../design-system/List/components/ListItem';
import HuMenu from '../../design-system/Menu';
import Tooltip from '../../design-system/Tooltip';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Collapse, Divider, IconButton, Stack, Typography, } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { IconChevronDown, IconDotsVertical, IconGripVertical, } from '@tabler/icons-react';
const NOOP_SORTABLE = {
    setNodeRef: undefined,
    attributes: {},
    listeners: undefined,
    transform: null,
    isDragging: false,
};
const SectionItem = ({ children, title, expanded, isSelected = false, hasError = false, errorTooltip, onToggleExpand, onClick, menuOptions, footer, draggable = false, dragId, dragData, backgroundColor, hasDefaultBorder = false, ...stackProps }) => {
    const theme = useTheme();
    const [menuAnchor, setMenuAnchor] = useState(null);
    const sortable = useSortable({
        id: dragId ?? '',
        data: dragData,
        disabled: !draggable,
    });
    const { setNodeRef, attributes, listeners, transform, isDragging } = draggable
        ? sortable
        : NOOP_SORTABLE;
    const getBorder = () => {
        if (isSelected) {
            return `1px solid ${theme.palette.new.border.neutral.brand}`;
        }
        if (hasError) {
            return `1px solid ${theme.palette.new.border.states.error}`;
        }
        if (hasDefaultBorder) {
            return `1px solid ${theme.palette.new.border.neutral.default}`;
        }
        return '1px solid transparent';
    };
    const handleChevronClick = event => {
        event.stopPropagation();
        onToggleExpand(event, !expanded);
    };
    const handleMenuToggle = event => {
        event.stopPropagation();
        setMenuAnchor(prev => (prev ? null : event.currentTarget));
    };
    const handleMenuClose = () => {
        setMenuAnchor(null);
    };
    const handleMenuItemClick = (callback) => () => {
        setMenuAnchor(null);
        callback();
    };
    const style = {
        transform: transform ? CSS.Translate.toString(transform) : undefined,
    };
    const hasMenu = menuOptions && menuOptions.length > 0;
    return (_jsx(Tooltip, { disableTooltip: !hasError || !errorTooltip, description: errorTooltip ?? '', direction: "right", children: _jsxs(Stack, { ref: setNodeRef, style: style, sx: {
                minWidth: 0,
                width: 1,
                opacity: isDragging ? 0.7 : 1,
                zIndex: isDragging ? 1000 : 1,
            }, ...stackProps, ...attributes, ...listeners, children: [_jsxs(Stack, { sx: {
                        minWidth: 0,
                        backgroundColor: backgroundColor ?? theme.palette.new.background.layout.default,
                        border: getBorder,
                        borderRadius: 2,
                        overflow: 'hidden',
                        ...(draggable && {
                            '&:hover .drag-handle': { opacity: 1 },
                        }),
                    }, children: [_jsxs(Stack, { role: "button", tabIndex: 0, onClick: onClick, sx: {
                                flexDirection: 'row',
                                alignItems: 'center',
                                gap: 0.5,
                                p: 2,
                                cursor: 'pointer',
                                userSelect: 'none',
                            }, children: [draggable && (_jsx(Stack, { className: "drag-handle", sx: {
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        width: 28,
                                        height: 28,
                                        borderRadius: '50%',
                                        cursor: 'grab',
                                        opacity: 0,
                                        transition: 'opacity 0.2s',
                                        flexShrink: 0,
                                        color: hasError
                                            ? theme.palette.new.text.feedback.error
                                            : theme.palette.new.text.neutral.lighter,
                                    }, children: _jsx(IconGripVertical, { size: 24 }) })), _jsx(Typography, { variant: "globalS", fontWeight: "fontWeightSemiBold", sx: {
                                        flex: 1,
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap',
                                        color: hasError
                                            ? theme.palette.new.text.feedback.error
                                            : theme.palette.new.text.neutral.default,
                                    }, children: title }), hasMenu && (_jsx(IconButton, { size: "large", onClick: handleMenuToggle, sx: { flexShrink: 0 }, children: _jsx(IconDotsVertical, { size: 24 }) })), _jsx(IconButton, { size: "large", onClick: handleChevronClick, "aria-expanded": expanded, sx: { flexShrink: 0 }, children: _jsx(IconChevronDown, { size: 24, style: {
                                            transform: expanded ? 'rotate(180deg)' : 'none',
                                            transition: 'transform 0.2s',
                                        } }) })] }), _jsx(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { sx: { px: 2, pb: 2 }, children: [children, footer && (_jsxs(_Fragment, { children: [_jsx(Divider, { sx: { my: 1 } }), footer] }))] }) })] }), hasMenu && (_jsx(HuMenu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: handleMenuClose, children: menuOptions.map(option => (_jsx(ListItem, { onClick: handleMenuItemClick(option.onClick), disabled: option.disabled, text: { title: option.title }, avatar: option.Icon ? { Icon: option.Icon } : undefined }, option.title))) }))] }) }));
};
export default SectionItem;
