/* eslint-disable no-console */

import { useState } from 'react';

import Typography from '@mui/material/Typography';
import { segmentations } from '@src/mock/data/segmentations';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import CollapsibleSelectionList from './index';

const meta: Meta<typeof CollapsibleSelectionList> = {
  component: CollapsibleSelectionList,
  title: 'Composed Components/CollapsibleSelectionList',
  tags: ['autodocs'],
  args: {
    virtualized: true,
    title: segmentations[0].name,
    items: segmentations[0].items,
    itemRenderer: item => (
      <Typography
        variant="globalS"
        color={theme => theme.palette.new.text.neutral.default}
      >
        {item.name}
      </Typography>
    ),
    selected: new Set([1, 3, 5]),
    selectionLimit: 10,
    listHeight: 300,
    allowSelectAll: true,
    slotProps: {
      search: {
        placeholder: 'Buscar departamento...',
      },
      accordion: {
        getDescription: (selected, total) =>
          `${selected.size} de ${total} departamentos seleccionados`,
      },
      selectAllCheckbox: {
        label: 'Seleccionar todos los departamentos',
      },
      stateCard: {
        title: 'No se encontraron resultados',
        description: 'No se encontraron resultados',
      },
    },
  },
};

export default meta;

type Story = StoryObj<typeof CollapsibleSelectionList>;

export const Default: Story = {
  render: args => {
    const [selected, setSelected] = useState<Set<number>>(
      args.selected || new Set(),
    );

    const handleChange = (value: number[]) => {
      setSelected(new Set(value));
      console.log('Selected items:', value);
    };

    return (
      <CollapsibleSelectionList
        {...args}
        selected={selected}
        onChange={handleChange}
      />
    );
  },
};