import { useState } from "react";
import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Checkbox, Text, IntegrationLogo, Icon, ICON_TYPE } from "../..";
import { Accordion } from "./Accordion";

<Meta title="Components/Disclosure/Accordion" component={Accordion} />

<ComponentHeading
  componentName="Accordion"
  description="A component that expands/collapses vertically when clicked"
  sourcePath="src/components/Accordion/Accordion.tsx"
/>

```jsx
import { Accordion } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Accordion">
    {() => {
      const [checked, setChecked] = useState(true);
      return (
        <Accordion.Group>
          <Accordion title="Accordion Item One" defaultIsOpen>
            This is the content
          </Accordion>
          <Accordion title="Accordion Item Two" isActive={checked}>
            <Checkbox
              label="This is some interactive content"
              checked={checked}
              onChange={() => setChecked(!checked)}
            />
          </Accordion>
          <Accordion title="Accordion Item Three">
            <span role="img" aria-label="hello friend">
              👀
            </span>
          </Accordion>
        </Accordion.Group>
      );
    }}
  </Story>
</Preview>

## Props

<Props of={Accordion} />

## Demos

### Max Height

Providing a CSS value to the `maxHeight` prop will keep the Accordion content from exceeding that
height and will scroll if there is more content than will fit.

<Preview withSource={SourceState.OPEN}>
  <Story name="Accordion max height">
    <Accordion.Group>
      <Accordion title="Accordion Item One" maxHeight="100px">
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
        <Text>This is the content.</Text>
      </Accordion>
    </Accordion.Group>
  </Story>
</Preview>

### `defaultIsOpen` prop

Allow an accordion to be opened by default.

<Preview withSource={SourceState.OPEN}>
  <Story name="Accordion defaultIsOpen prop">
    <Accordion.Group>
      <Accordion title="Accordion Item One" defaultIsOpen>
        <Text>This is the content.</Text>
      </Accordion>
      <Accordion title="Accordion Item Two">
        <Text>This is the content.</Text>
      </Accordion>
      <Accordion title="Accordion Item Three">
        <Text>This is the content.</Text>
      </Accordion>
    </Accordion.Group>
  </Story>
</Preview>

### Headers with icons

Add an icon or logo in the header.

<Preview withSource={SourceState.OPEN}>
  <Story name="Accordion headers with icons">
    <Accordion.Group>
      <Accordion
        title="Accordion Item One"
        iconSlot={<IntegrationLogo logo="aws" size={16} square />}
      >
        <Text>This is the content.</Text>
      </Accordion>
      <Accordion
        title="Accordion Item Two"
        iconSlot={<IntegrationLogo logo="gitlab" size={16} square />}
      >
        <Text>This is the content.</Text>
      </Accordion>
      <Accordion
        title="Accordion Item Three"
        iconSlot={<IntegrationLogo logo="deploy" size={16} square />}
      >
        <Text>This is the content.</Text>
      </Accordion>
      <Accordion
        title="Accordion Item Three"
        iconSlot={<Icon icon={ICON_TYPE.BOLT} />}
      >
        <Text>This is the content.</Text>
      </Accordion>
      <Accordion
        title="Accordion Item Three"
        iconSlot={<Icon icon={ICON_TYPE.COG} />}
      >
        <Text>This is the content.</Text>
      </Accordion>
    </Accordion.Group>
  </Story>
</Preview>