import { List } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react';

import { type ParticipationItem } from '../../../types';
import ParticipationListItem from '../ParticipationListItem';

import ParticipationList from '.';

const sampleItems: ParticipationItem[] = [
  {
    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 meta: Meta<typeof ParticipationList> = {
  title:
    'Composed Components/PeopleExperience/SurveyResults/Participation/ParticipationList',
  component: ParticipationList,
  parameters: {
    layout: 'padded',
  },
  args: {
    items: sampleItems,
    noDataMessage: 'Sin datos suficientes',
    emptyState: {
      title: 'Sin resultados',
      description: 'No se encontraron participantes para esta selección.',
    },
    formatRatioLabel: (completed, total) => `${completed} / ${total}`,
  },
};

export default meta;

type Story = StoryObj<typeof ParticipationList>;

export const Default: Story = {};

export const WithChildren: Story = {
  args: {
    renderChildren: (item: ParticipationItem, isExpanded: boolean) =>
      isExpanded ? (
        <List disablePadding>
          <ParticipationListItem
            primary={`Sub-equipo A — ${item.title}`}
            secondary="15 colaboradores"
            value={80}
            ratioLabel="12 / 15"
            noDataMessage="Sin datos"
            isEmpty={false}
            depth={1}
          />
          <ParticipationListItem
            primary={`Sub-equipo B — ${item.title}`}
            secondary="10 colaboradores"
            value={50}
            ratioLabel="5 / 10"
            noDataMessage="Sin datos"
            isEmpty={false}
            depth={1}
          />
        </List>
      ) : null,
  },
};

export const Loading: Story = {
  args: {
    items: undefined,
    isLoading: true,
  },
};

export const Empty: Story = {
  args: {
    items: [],
  },
};
