import { FormProvider, useForm } from 'react-hook-form';

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

import { type Group } from './types';
import CollapsibleGroupSelector from '.';

const SAMPLE_GROUPS: Group[] = [
  {
    name: 'Engineering',
    value: 'engineering',
    items: [
      { value: 'frontend', label: 'Frontend' },
      { value: 'backend', label: 'Backend' },
      { value: 'devops', label: 'DevOps' },
      { value: 'qa', label: 'QA' },
    ],
  },
  {
    name: 'Design',
    value: 'design',
    items: [
      { value: 'ux', label: 'UX Design' },
      { value: 'ui', label: 'UI Design' },
      { value: 'research', label: 'Research' },
    ],
  },
  {
    name: 'Marketing',
    value: 'marketing',
    items: [{ value: 'content', label: 'Content Marketing' }],
  },
];

const generateLargeGroup = (count: number): Group => ({
  name: 'Large Department',
  value: 'large-department',
  items: Array.from({ length: count }, (_, i) => ({
    value: `item-${i}`,
    label: `Team member ${i + 1}`,
  })),
});

const meta: Meta<typeof CollapsibleGroupSelector> = {
  component: CollapsibleGroupSelector,
  title: 'Composed Components/CollapsibleGroupSelector',
  tags: ['autodocs'],
  argTypes: {
    fieldName: {
      description:
        'react-hook-form field path that maps to a Record<string, boolean>',
    },
    groups: { control: false },
    title: { description: 'Heading displayed above the group list' },
    expanded: {
      description:
        'Controls which accordion is expanded (omit for uncontrolled mode)',
    },
    onExpandedChange: { control: false },
    isLoading: { description: 'Shows a skeleton placeholder while loading' },
    selectAllLabel: {
      description: 'Label for the "select all" checkbox in each group',
    },
    withSearch: {
      description: 'Enables a search input inside each group accordion',
    },
  },
  parameters: {
    layout: 'padded',
    backgrounds: { default: 'white' },
    docs: {
      controls: { expanded: true },
    },
  },
  decorators: [
    Story => (
      <Stack
        sx={{
          width: '100%',
          maxWidth: 500,
          mx: 'auto',
          p: 3,
          backgroundColor: 'white',
          borderRadius: 2,
        }}
      >
        <Story />
      </Stack>
    ),
  ],
};

export default meta;

type Story = StoryObj<typeof CollapsibleGroupSelector>;

export const Default: Story = {
  args: {
    fieldName: 'departments',
    groups: SAMPLE_GROUPS,
    title: 'Departments',
  },
  render: props => {
    const form = useForm({
      defaultValues: {
        departments: {} as Record<string, boolean>,
      },
    });

    return (
      <FormProvider {...form}>
        <CollapsibleGroupSelector {...props} />
      </FormProvider>
    );
  },
};

export const Loading: Story = {
  args: {
    fieldName: 'departments',
    groups: [],
    title: 'Departments',
    isLoading: true,
  },
  render: props => {
    const form = useForm();

    return (
      <FormProvider {...form}>
        <CollapsibleGroupSelector {...props} />
      </FormProvider>
    );
  },
};

export const ManyItems: Story = {
  args: {
    fieldName: 'teams',
    groups: [generateLargeGroup(30)],
    title: 'Teams',
  },
  render: props => {
    const form = useForm({
      defaultValues: {
        teams: {} as Record<string, boolean>,
      },
    });

    return (
      <FormProvider {...form}>
        <CollapsibleGroupSelector {...props} />
      </FormProvider>
    );
  },
};

export const WithSearch: Story = {
  args: {
    fieldName: 'searchable',
    groups: [...SAMPLE_GROUPS, generateLargeGroup(30)],
    title: 'Searchable Groups',
    withSearch: true,
  },
  render: props => {
    const form = useForm({
      defaultValues: {
        searchable: {} as Record<string, boolean>,
      },
    });

    return (
      <FormProvider {...form}>
        <CollapsibleGroupSelector {...props} />
      </FormProvider>
    );
  },
};