import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Pagination from '../../../../../design-system/Inputs/Pagination';
import { List } from '@mui/material';
import { SegmentType, SortFilter, } from '../../../types';
import ParticipationListItem from '../ParticipationListItem';
import ParticipationDashboard from '.';
const segments = [
    {
        id: 'all',
        type: SegmentType.SEGMENTATION_GROUPS,
        title: 'Grupos de segmentación',
    },
    { id: 'bosses', type: SegmentType.BOSSES, title: 'Líderes' },
    { id: 'direct', type: SegmentType.DIRECT_BOSS, title: 'Líder directo' },
    { id: 'age', type: SegmentType.AGE, title: 'Edad' },
    { id: 'seniority', type: SegmentType.SENIORITY, title: 'Antigüedad' },
];
const sampleItems = [
    {
        id: 1,
        title: 'Departamento de Ingeniería',
        subtitle: '50 colaboradores',
        totalReviews: 50,
        completedReviews: 36,
        participationPercentage: 72,
        hasChildren: true,
        childrenAmount: 2,
    },
    {
        id: 2,
        title: 'Departamento de Marketing',
        subtitle: '30 colaboradores',
        totalReviews: 30,
        completedReviews: 28,
        participationPercentage: 93,
        hasChildren: false,
        childrenAmount: 0,
    },
    {
        id: 3,
        title: 'Sin asignación',
        subtitle: null,
        totalReviews: 0,
        completedReviews: 0,
        participationPercentage: 0,
        hasChildren: false,
        childrenAmount: 0,
    },
];
const sampleItemsWithAvatars = [
    {
        id: 1,
        title: 'Ana García',
        subtitle: 'Ingeniería',
        totalReviews: 50,
        completedReviews: 36,
        participationPercentage: 72,
        hasChildren: false,
        childrenAmount: 0,
        avatarSrc: 'https://i.pravatar.cc/150?img=1',
        avatarAlt: 'Ana García',
    },
    {
        id: 2,
        title: 'Carlos Rodríguez',
        subtitle: 'Marketing',
        totalReviews: 30,
        completedReviews: 28,
        participationPercentage: 93,
        hasChildren: false,
        childrenAmount: 0,
        avatarSrc: 'https://i.pravatar.cc/150?img=3',
        avatarAlt: 'Carlos Rodríguez',
    },
    {
        id: 3,
        title: 'María López',
        subtitle: 'Recursos Humanos',
        totalReviews: 20,
        completedReviews: 10,
        participationPercentage: 50,
        hasChildren: false,
        childrenAmount: 0,
        avatarAlt: 'María López',
    },
    {
        id: 4,
        title: 'Sin asignación',
        subtitle: null,
        totalReviews: 0,
        completedReviews: 0,
        participationPercentage: 0,
        hasChildren: false,
        childrenAmount: 0,
    },
];
const meta = {
    title: 'Composed Components/PeopleExperience/SurveyResults/Participation/ParticipationDashboard',
    component: ParticipationDashboard,
    parameters: {
        layout: 'padded',
    },
    args: {
        segments,
        selectedSegment: segments[0],
        onSegmentChange: () => { },
        sortOrder: SortFilter.ASC,
        onSortChange: () => { },
        items: sampleItems,
        noDataMessage: 'Sin datos suficientes',
        emptyState: {
            title: 'Sin resultados',
            description: 'No se encontraron participantes para esta selección.',
        },
        formatRatioLabel: (completed, total) => `${completed} / ${total}`,
        paginationController: null,
        labels: {
            showBy: 'Mostrar según',
            ascending: 'Ascendente',
            descending: 'Descendente',
            searchPlaceholder: 'Buscar...',
        },
    },
};
export default meta;
export const Default = {};
export const WithSortAndSearch = {
    args: {
        showSort: true,
        showSearch: true,
        searchQuery: '',
        onSearchChange: () => { },
        renderChildren: (item, isExpanded) => isExpanded ? (_jsxs(List, { disablePadding: true, children: [_jsx(ParticipationListItem, { primary: `Sub-equipo A — ${item.title}`, secondary: "15 colaboradores", value: 80, ratioLabel: "12 / 15", noDataMessage: "Sin datos", isEmpty: false, depth: 1, expandable: true, children: (isSubExpanded) => isSubExpanded ? (_jsxs(List, { disablePadding: true, children: [_jsx(ParticipationListItem, { primary: "Turno ma\u00F1ana", secondary: "8 colaboradores", value: 100, ratioLabel: "8 / 8", noDataMessage: "Sin datos", isEmpty: false, depth: 2 }), _jsx(ParticipationListItem, { primary: "Turno tarde", secondary: "7 colaboradores", value: 57, ratioLabel: "4 / 7", noDataMessage: "Sin datos", isEmpty: false, depth: 2 })] })) : null }), _jsx(ParticipationListItem, { primary: `Sub-equipo B — ${item.title}`, secondary: "10 colaboradores", value: 50, ratioLabel: "5 / 10", noDataMessage: "Sin datos", isEmpty: false, depth: 1, isLastItem: true })] })) : null,
    },
};
export const Loading = {
    args: {
        isLoading: true,
        items: undefined,
    },
};
export const Empty = {
    args: {
        items: [],
    },
};
export const WithPagination = {
    args: {
        showSort: true,
        paginationController: (_jsx(Pagination, { page: 1, totalPages: 3, limit: 10, limitOptions: [10, 20, 30], onChangePage: () => { }, onChangeLimit: () => { } })),
    },
};
export const WithAvatars = {
    args: {
        items: sampleItemsWithAvatars,
    },
};
