import { useState } from 'react';
import { useForm } from 'react-hook-form';

import FormWrapper from '@composed-components/storybook/FormWrapper';
import { departmentSegmentationItems } from '@src/mock/data/segmentations';
import { type Meta, type StoryObj } from '@storybook/react';

import FormMenuListItems from './form';
import MenuListItems from './index';

const meta: Meta<typeof MenuListItems> = {
  title: 'Composed Components/MenuListItems',
  component: MenuListItems,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof meta>;

const BasicStoryWrapper = ({ children }: { children: React.ReactNode }) => {
  return children;
};

export const Default: Story = {
  render: args => {
    const [selectedItems, setSelectedItems] = useState<
      { id: number; name: string }[]
    >([]);
    return (
      <BasicStoryWrapper>
        <MenuListItems
          {...args}
          value={selectedItems}
          onChange={setSelectedItems}
        />
      </BasicStoryWrapper>
    );
  },
  args: {
    items: departmentSegmentationItems,
    getTriggerTitle: value =>
      value.map(item => item.name).join(', ') || 'Seleccionar países',
    maxSelection: 3,
    slotProps: {
      selectedItemsLabel: {
        children: 'Países seleccionados',
      },
      allItemsLabel: {
        children: 'Todos los países',
      },
    },
  },
};

export const WithForm: Story = {
  render: () => {
    const form = useForm();
    return (
      <FormWrapper form={form}>
        <FormMenuListItems
          name="countries"
          menuListItemsProps={{
            items: departmentSegmentationItems,
            getTriggerTitle: value =>
              value.map(item => item.name).join(', ') || 'Seleccionar países',
            maxSelection: 3,
          }}
        />
      </FormWrapper>
    );
  },
};