import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import AccordionA11y from './stories/Accordion.a11y.mdx';
import Accordion from './Accordion';
import AccordionItem from './AccordionItem';
import PageHeader from 'blocks/PageHeader';
import Headline from 'blocks/Headline';
import {formatTags} from '../../docs/utils';
const copy = {
  title: 'Is this title for accordion?',
  description:
    // eslint-disable-next-line max-len
    "Now your family member just needs to open the link and hit 'accept'. If they aren't already on Brainly, we'll hook them up with that too. Create your unique family link with a click and share it with your family via email, Messenger, WhatsApp, whatever you like.",
};
const CONTROLLED_ACCORDION_IDS = [
  'accordion_item_1',
  'accordion_item_2',
  'accordion_item_3',
];
const storyItems = [
  <AccordionItem title={copy.title} id="accordion-item-1" key="1">
    {copy.description}
  </AccordionItem>,
  <AccordionItem title={copy.title} key="2">
    {copy.description}
  </AccordionItem>,
  <AccordionItem title={copy.title} key="3">
    {copy.description}
  </AccordionItem>,
];
const spacingOptions = [
  'xxs',
  'xs',
  's',
  'm',
  'l',
  'xl',
  'xxl',
  'xxxl',
  'xxxxl',
  'none',
];

<Meta
  title="Components/Accordion"
  component={Accordion}
  argTypes={{
    children: {
      control: {
        disable: true,
      },
    },
    onChange: {
      table: {
        category: 'Events',
      },
    },
    defaultExpanded: {
      control: {
        type: 'array',
      },
    },
    expanded: {
      control: {
        type: 'array',
      },
    },
    spacing: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(spacingOptions),
        },
      },
      control: {
        type: 'select',
        options: spacingOptions,
      },
    },
    disableKeyboardExpansion: {
      description:
        'Disables expanding/collapsing accordion items using Space/Enter keys',
      control: {
        type: 'boolean',
      },
    },
  }}
  args={{
    allowMultiple: true,
    children: storyItems,
  }}
  subcomponents={{AccordionItem}}
/>

<PageHeader>Accordion</PageHeader>

- [Stories](#stories)
- [Responsive props](#responsive-props)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story name="Default">{args => <Accordion {...args} />}</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Expanded

<Canvas>
  <Story
    name="Expanded"
    args={{
      expanded: CONTROLLED_ACCORDION_IDS[0],
      reduceMotion: true,
    }}
  >
    {args => {
      const [prevExpanded, setPrevExpanded] = React.useState();
      const [expanded, setExpanded] = React.useState('');
      const handleChange = id => setExpanded(id);
      const {expanded: propsExpanded, ...props} = args;
      if (propsExpanded !== prevExpanded) {
        setPrevExpanded(propsExpanded);
        setExpanded(propsExpanded);
      }
      return (
        <Accordion onChange={handleChange} expanded={expanded} {...props}>
          {CONTROLLED_ACCORDION_IDS.map(id => (
            <AccordionItem title={copy.title} key={id} id={id}>
              {copy.description}
            </AccordionItem>
          ))}
        </Accordion>
      );
    }}
  </Story>
</Canvas>

### No Gaps

<Canvas>
  <Story name="NoGaps">{args => <Accordion {...args} spacing="none" />}</Story>
</Canvas>

### Reduced Motion

<Canvas>
  <Story name="ReducedMotion" args={{reduceMotion: true}}>
    {args => <Accordion {...args} />}
  </Story>
</Canvas>

### Disabled Keyboard Expansion

When `disableKeyboardExpansion` is enabled, accordion items cannot be expanded/collapsed using Space or Enter keys. Mouse clicks will still work normally.

<Canvas>
  <Story
    name="DisabledKeyboardExpansion"
    args={{disableKeyboardExpansion: true}}
  >
    {args => <Accordion {...args} />}
  </Story>
</Canvas>

## Responsive props

To control styles that differ across screen sizes you can use responsive props. All props marked as Responsive support [object and array syntax](/story/foundation-✨-responsive-props--page). Resize window to check how component is changing padding size.

## Accessibility

<AccordionA11y />