import Accordion from "../Accordion";
import AccordionItem from "../../AccordionItem/AccordionItem";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import Checkbox from "../../../Checkbox/Checkbox";
import {
  BREADCRUBMS,
  STEPPER,
  WIZARD
} from "../../../../storybook/components/related-components/component-description-map";
import { accordionMultiActivePlaySuite, accordionSingleActivePlaySuite } from "../__tests__/accordion.interactions";
import { RelatedComponents, UsageGuidelines } from "../../../../storybook";
import "./accordion.stories.scss";

<Meta
  title="Data display/Accordion - (Coming Soon)"
  component={Accordion}
  subcomponents={{ AccordionItem }}
  argTypes={{
    children: { control: false },
    defaultIndex: { control: false }
  }}
/>

<!--- Component template -->

export const accordionTemplate = args => {
  return (
    <Accordion className="l3-storybook-accordion_small-wrapepr" defaultIndex={[1]} {...args}>
      <AccordionItem title="Notifications" />
      <AccordionItem title="Setting" />
      <AccordionItem title="Info" />
      <AccordionItem title="Profile" />
      <AccordionItem title="Permisions" />
      <AccordionItem title="Seurity" />
      <AccordionItem title="Connectivity" />
      <AccordionItem title="Integration" />
      <AccordionItem title="Assets" />
    </Accordion>
  );
};

<!--- Component documentation -->

# Accordion

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Accordion is a vertically stacked list of items. Each item can be "expanded" or "collapsed" to reveal the content within with that item.

<Canvas>
  <Story name="Overview" args={{}}>
    {accordionTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Use accordion reduce clutter and chunk the information one by one",
    "Accordion Label must be short, clear, and understandable to indicate what's inside",
    "Default state of accordion is closed unless used for navigation",
    "Accordion content can include icons, radio buttons, and checkboxes."
  ]}
/>

## Variants

### Multi active

Each section can be expanded without closing the others

<Canvas>
  <Story name="Multi active" play={accordionMultiActivePlaySuite}>
    <Accordion className="l3-storybook-accordion_small-wrapepr" allowMultiple defaultIndex={[1, 3]}>
      <AccordionItem title="Notifications">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
      <AccordionItem title="Setting">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
      <AccordionItem title="Connectivity">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
      <AccordionItem title="Integration">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
      <AccordionItem title="Assets">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
    </Accordion>
  </Story>
</Canvas>

### Single active

Only one section can be open at the time

<Canvas>
  <Story name="Single active" play={accordionSingleActivePlaySuite}>
    <Accordion className="l3-storybook-accordion_small-wrapepr" defaultIndex={[1]}>
      <AccordionItem title="Notifications">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
      <AccordionItem title="Setting">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
      <AccordionItem title="Connectivity">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
      <AccordionItem title="Integration">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
      <AccordionItem title="Assets">
        <div className="l3-storybook-accordion_small-box" />
      </AccordionItem>
    </Accordion>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      className: "l3-storybook-accordion_big-figure",
      positive: {
        component: (
          <Accordion className="l3-storybook-accordion_box-small">
            <AccordionItem title="Notifications" />
            <AccordionItem title="Security" />
            <AccordionItem title="InfoAssets" />
          </Accordion>
        ),
        description: "Use informative short labels."
      },
      negative: {
        className: "l3-storybook-accordion_big-figure",
        component: (
          <Accordion className="l3-storybook-accordion_box-small">
            <AccordionItem title="Closed" />
            <AccordionItem title="Closed" />
            <AccordionItem title="Closed" />
          </Accordion>
        ),
        description: "Indicate the accordion state with labels."
      }
    }
  ]}
/>

## Use cases and examples

### Preferences Accordion

<Canvas>
  <Story name="Preferences Accordion">
    <Accordion className="l3-storybook-accordion_wrapper" defaultIndex={[0]}>
      <AccordionItem title="In l3vels">
        <div className="l3-storybook-accordion_checkbox-wrapper">
          <Checkbox label="Likes my update" checked />
          <Checkbox label="Replies to my update" />
          <Checkbox label="Replies or likes a conversation I'm a part of" checked />
          <Checkbox label="Subscribes me to a Board/Item/Team" checked />
          <Checkbox label="Writes an update on an items I'm subscribed to" checked />
        </div>
      </AccordionItem>
    </Accordion>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[WIZARD, BREADCRUBMS, STEPPER]} />
