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

import ParticipationListItem from '.';

const meta: Meta<typeof ParticipationListItem> = {
  title:
    'Composed Components/PeopleExperience/SurveyResults/Participation/ParticipationListItem',
  component: ParticipationListItem,
  parameters: {
    layout: 'padded',
  },
  decorators: [
    Story => (
      <List disablePadding>
        <Story />
      </List>
    ),
  ],
  args: {
    primary: 'Departamento de Ingeniería',
    secondary: '45 colaboradores',
    value: 72,
    ratioLabel: '36 / 50',
    noDataMessage: 'Sin datos',
    isEmpty: false,
  },
};

export default meta;

type Story = StoryObj<typeof ParticipationListItem>;

export const Default: Story = {};

export const Expandable: Story = {
  args: {
    expandable: true,
    children: (isExpanded: boolean) =>
      isExpanded ? (
        <List disablePadding>
          <ParticipationListItem
            primary="Sub-equipo A"
            secondary="10 colaboradores"
            value={80}
            ratioLabel="8 / 10"
            noDataMessage="Sin datos"
            isEmpty={false}
            depth={1}
          />
          <ParticipationListItem
            primary="Sub-equipo B"
            secondary="15 colaboradores"
            value={60}
            ratioLabel="9 / 15"
            noDataMessage="Sin datos"
            isEmpty={false}
            depth={1}
          />
        </List>
      ) : null,
  },
};

export const Empty: Story = {
  args: {
    isEmpty: true,
    value: 0,
    ratioLabel: '0 / 0',
  },
};
