import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { select, text, boolean, number, array } from '@storybook/addon-knobs'
import {
  data,
  dataWithIds,
  createSections,
  onOpen,
  onClose,
  onSortEnd,
  AccordionWithCustomIds,
} from './Accordion.storiesHelpers'
import Accordion from './'
import { Page, Text } from '../index'

<Meta
  title="Components/Structural/Accordion"
  component={Accordion}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A9975',
    },
  }}
/>

# Accordion

This component is a graphic control element which includes one or more
vertically stacked section which can be expanded or collapsed.

<Canvas>
  <Story name="default">
    <Accordion
      distance={number('distance', 5)}
      isSortable={boolean('isSortable', false)}
      isSeamless={boolean('isSeamless', false)}
      allowMultiple={boolean('allowMultiple', false)}
      pressDelay={number('pressDelay', 300)}
      onOpen={onOpen}
      onClose={onClose}
      onSortEnd={onSortEnd}
      size={select(
        'Sizes',
        { extraSmall: 'xs', small: 'sm', medium: 'md', large: 'lg' },
        'md'
      )}
      openSectionIds={array('openSectionIds', [])}
    >
      {createSections(dataWithIds)}
    </Accordion>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: PL
- **Usage**: Messages list, Beacon settings translations, Custom properties, Saved Replies

<br />
<br />

### Props

<ArgsTable of={Accordion} />

<br />
<br />

## Accordion.Section

This component is part of the graphical control element that is the `Accordion`.
The `Section` houses a `Title` and `Body`. When the `Section` is open its
`Body` is expanded, otherwise its `Body` is collapsed.

Each section is assigned an auto-generated uuid which is used to track the
open state of the section. You may optionally set an `id` prop which will be
used instead of the uuid. This allows for programatic control of accordion
sections using known id values.

This component is to be used within an [`Accordion`](./Accordion.md).

### Props

<ArgsTable of={Accordion.Section} />

<br />
<br />

## Accordion.Body

This component is part of the graphical control element that is the `Accordion`.
The `Body` enhances the presentation of its children by wrapping them in a
padded element. By default the `Body` is collapsed and can be expanded by
clicking on its adjacent `Title` in the same `Section` of the `Accordion`.

This component is to be used within a `Section`.

### Props

<ArgsTable of={Accordion.Body} />

<br />
<br />

## Accordion.Title

This component is part of the graphical control element that is the `Accordion`.
The `Title` enhances the presentation of its children by wrapping them in a
padded element with a directional caret that indicates if the adjacent `Body`
is expanded or collapsed. Clicking the `Title` expands or contracts the adjacent
`Body` in the same `Section` of the `Accordion`.

This component is to be used within a `Section`.

### Props

<ArgsTable of={Accordion.Title} />

<br />
<br />

## Accordion.Link

This component is an enhanced variant of `Accordion.Section`that renders a `Link`.
This component is to be used within an `Accordion`.

### Props

<ArgsTable of={Accordion.Link} />

<br />
<br />

## Accordion.Heading & Accordion.Subheading

These components provide default styles to add Heading and Subheadings to Accordion sections.
They're to be used within a `Section` or `Link`.

<br />
<br />

## Stories

#### Inside a page

<Canvas>
  <Story name="Inside a page">
    <Page>
      <Page.Card>
        <Page.Header subtitle="Inside a page" />
        <Accordion
          distance={number('distance', 5)}
          isSortable={boolean('isSortable', false)}
          isSeamless={boolean('isSeamless', false)}
          allowMultiple={boolean('allowMultiple', false)}
          pressDelay={number('pressDelay', 300)}
          onSortEnd={onSortEnd}
          size={select(
            'Sizes',
            { extraSmall: 'xs', small: 'sm', medium: 'md', large: 'lg' },
            'md'
          )}
        >
          {createSections(data)}
        </Accordion>
      </Page.Card>
    </Page>
  </Story>
</Canvas>

#### Row Link

<Canvas>
  <Story name="Row Link">
    <Page>
      <Page.Card>
        <Accordion
          distance={number('distance', 5)}
          isSortable={boolean('isSortable', false)}
          isSeamless={boolean('isSeamless', true)}
          allowMultiple={boolean('allowMultiple', false)}
          pressDelay={number('pressDelay', 300)}
          onSortEnd={onSortEnd}
          size={select(
            'Sizes',
            { extraSmall: 'xs', small: 'sm', medium: 'md', large: 'lg' },
            'md'
          )}
        >
          <Accordion.Link to="/">
            <Text truncate weight={500}>
              {text('linkOneContent', 'Link Row One')}
            </Text>
          </Accordion.Link>
          <Accordion.Link to="/">
            <Text truncate weight={500}>
              {text('linkTwoContent', 'Link Row Two')}
            </Text>
          </Accordion.Link>
        </Accordion>
      </Page.Card>
    </Page>
  </Story>
</Canvas>

#### All link styles

<Canvas>
  <Story name="All link styles">
    <Page>
      <Page.Card>
        <Accordion
          distance={number('distance', 5)}
          isSortable={boolean('isSortable', true)}
          allowMultiple={boolean('allowMultiple', false)}
          pressDelay={number('pressDelay', 300)}
          onSortEnd={onSortEnd}
          size={select(
            'Sizes',
            {
              extraSmall: 'xs',
              small: 'sm',
              medium: 'md',
              large: 'lg',
              extraLarge: 'xl',
            },
            'xl'
          )}
        >
          <Accordion.Link to="/" isCompact>
            <Accordion.Heading muted>Paused Message Row</Accordion.Heading>
          </Accordion.Link>
          <Accordion.Link to="/" isCompact>
            <Accordion.Heading>Compact Row</Accordion.Heading>
          </Accordion.Link>
          <Accordion.Link to="/">
            <Accordion.Heading>March 40% Offer</Accordion.Heading>
            <Accordion.Subheading>
              Viewed 104 times. Last seen yesterday
            </Accordion.Subheading>
          </Accordion.Link>
          <Accordion.Link to="/">
            <Accordion.Heading>General NPS</Accordion.Heading>
            <Accordion.Subheading>
              Viewed 20k times. Last seen 10 min ago
            </Accordion.Subheading>
          </Accordion.Link>
          <Accordion.Link to="/">
            <Accordion.Heading>Menswear Range Promo</Accordion.Heading>
            <Accordion.Subheading>
              Viewed 1 time. Last seen 8:31am
            </Accordion.Subheading>
          </Accordion.Link>
          <Accordion.Link to="/" status="info" badge="Incomplete">
            <Accordion.Heading>New Account Onboarding</Accordion.Heading>
            <Accordion.Subheading>
              <span className="is-highlighted">Finish Setup. </span>
              <span>40% complete</span>
            </Accordion.Subheading>
          </Accordion.Link>
          <Accordion.Link to="/" status="error" badge="Paused">
            <Accordion.Heading>Business Outreach (Sales)</Accordion.Heading>
            <Accordion.Subheading>
              <span className="is-highlighted">
                Message paused because of an issue
              </span>
            </Accordion.Subheading>
          </Accordion.Link>
        </Accordion>
      </Page.Card>
    </Page>
  </Story>
</Canvas>

#### With custom ids

<Canvas>
  <Story name="Custom-Ids">
    <Page>
      <Page.Card>
        <AccordionWithCustomIds />
      </Page.Card>
    </Page>
  </Story>
</Canvas>
