import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Avatar } from '../../../../../design-system/Avatar';
import { Box, Collapse, Divider, IconButton, LinearProgress, Stack, Typography, } from '@mui/material';
import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
import { getInitials } from '../../../../../../utils/user';
const ParticipationListItem = ({ primary, secondary, value, ratioLabel, noDataMessage, isEmpty, expandable = false, depth = 0, children, isLastItem = false, avatarSrc, avatarAlt, }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const rightContent = depth === 0 ? (_jsxs(Stack, { sx: { gap: 0.5, alignItems: 'flex-end' }, children: [isEmpty && (_jsx(Typography, { variant: "caption", color: "textColors.neutralTextLighter", children: noDataMessage })), !isEmpty && (_jsxs(Stack, { sx: { alignItems: 'flex-end', gap: 0.5 }, children: [_jsxs(Stack, { sx: { flexDirection: 'row', alignItems: 'center', gap: 1 }, children: [_jsx(LinearProgress, { variant: "determinate", value: value, sx: { width: 84 } }), _jsxs(Typography, { variant: "globalXS", children: [value, "%"] })] }), _jsx(Typography, { variant: "globalXXS", color: "textColors.neutralTextLighter", noWrap: true, children: ratioLabel })] }))] })) : (_jsxs(Stack, { sx: { alignItems: 'flex-end' }, children: [_jsx(Typography, { variant: "globalS", fontWeight: "fontWeightSemiBold", children: isEmpty ? noDataMessage : `${value}%` }), !isEmpty && (_jsx(Typography, { variant: "globalXS", color: "textColors.neutralTextLighter", children: ratioLabel }))] }));
    return (_jsxs(Stack, { children: [_jsxs(Stack, { onClick: expandable ? () => setIsExpanded(prev => !prev) : undefined, sx: {
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 2,
                    py: 1,
                    ...(expandable && { cursor: 'pointer' }),
                }, children: [depth === 0 && (avatarSrc || avatarAlt) && (_jsx(Avatar, { src: avatarSrc, alt: avatarAlt, text: getInitials(primary), size: "small" })), _jsxs(Stack, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Typography, { variant: "globalS", fontWeight: "fontWeightSemiBold", noWrap: true, children: primary }), secondary && (_jsx(Typography, { variant: "globalXS", color: "textColors.neutralTextLighter", noWrap: true, children: secondary }))] }), rightContent, expandable && (_jsx(IconButton, { children: isExpanded ? _jsx(IconChevronUp, {}) : _jsx(IconChevronDown, {}) })), !expandable && _jsx(Box, { sx: { width: 40 } })] }), expandable && (_jsx(Collapse, { in: isExpanded, timeout: "auto", unmountOnExit: true, children: _jsx(Box, { sx: theme => ({
                        bgcolor: depth > 0
                            ? theme.palette.new.background.elements.grey
                            : undefined,
                        borderRadius: theme.shape.borderRadiusM,
                        pl: 5,
                        pr: 2,
                        my: 1,
                    }), children: children?.(true) }) })), !isLastItem && depth === 1 && _jsx(Divider, {})] }));
};
export default ParticipationListItem;
