import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import ButtonGroup from '../../../../../design-system/ButtonGroup';
import Dropdown from '../../../../../design-system/Dropdown';
import InputSearch from '../../../../../design-system/Inputs/Search';
import MenuItem from '../../../../../design-system/Menu/components/MenuItem';
import Title from '../../../../../design-system/Title';
import { Card, Stack } from '@mui/material';
import { SortFilter } from '../../../types';
import ParticipationList from '../ParticipationList';
const ParticipationDashboard = ({ segments, selectedSegment, onSegmentChange, showSort = false, sortOrder, onSortChange, showSearch = false, searchQuery = '', onSearchChange, items, isLoading = false, isPreviousData = false, renderChildren, noDataMessage, emptyState, formatRatioLabel, paginationController, labels, }) => {
    const [isOpen, setIsOpen] = useState(false);
    return (_jsx(Card, { sx: theme => ({
            flexShrink: 0,
            borderRadius: 2,
            border: `1px solid ${theme.palette.new.border.neutral.default}`,
        }), children: _jsxs(Stack, { sx: { gap: 'inherit' }, children: [_jsxs(Stack, { sx: theme => ({
                        padding: 3,
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        borderTopLeftRadius: theme.spacing(1),
                        borderTopRightRadius: theme.spacing(1),
                    }), children: [_jsxs(Stack, { sx: { flexDirection: 'row', alignItems: 'center', gap: 1 }, children: [_jsx(Title, { variant: "M", title: labels.showBy }), _jsx(Dropdown, { label: selectedSegment?.title ?? labels.showBy, buttonVariant: "secondary", open: isOpen, onOpen: () => setIsOpen(true), onClose: () => setIsOpen(false), children: segments.map(segment => (_jsx(MenuItem, { selected: segment.id === selectedSegment?.id &&
                                            segment.type === selectedSegment?.type, onClick: () => {
                                            onSegmentChange(segment);
                                            setIsOpen(false);
                                        }, children: segment.title }, `${segment.type}-${segment.id}`))) })] }), showSort && (_jsx(ButtonGroup, { labels: [labels.ascending, labels.descending], value: sortOrder === SortFilter.ASC ? 0 : 1, onChange: index => {
                                if (index !== null)
                                    onSortChange(index === 0 ? SortFilter.ASC : SortFilter.DESC);
                            } }))] }), _jsxs(Stack, { sx: { gap: 3, px: 3, pb: 3 }, children: [showSearch && onSearchChange && (_jsx(InputSearch, { variant: "custom", fullWidth: true, placeholder: labels.searchPlaceholder, value: searchQuery, onChange: onSearchChange, showClear: true })), _jsx(ParticipationList, { items: items, isLoading: isLoading, isPreviousData: isPreviousData, noDataMessage: noDataMessage, emptyState: emptyState, formatRatioLabel: formatRatioLabel, renderChildren: renderChildren }), paginationController] })] }) }));
};
export default ParticipationDashboard;
