import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
import ButtonGroup from "../ButtonGroup";
import { createComponentTemplate, createStoryMetaSettings, Link } from "../../../storybook";
import { Mobile } from "../../Icon/Icons";
import { BUTTON, TABS, BREADCRUBMS } from "../../../storybook/components/related-components/component-description-map";
import Desktop from "./assets/Desktop.js";
import "./buttonGroup.stories.scss";

export const metaSettings = createStoryMetaSettings({
  component: ButtonGroup,
  enumPropNamesArray: ["size"],
  actionPropsArray: ["onSelect"]
});

<Meta
  title="Buttons/ Button Group"
  component={ButtonGroup}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const buttonGroupTemplate = createComponentTemplate(ButtonGroup);

<!--- Component documentation -->

# Button Group

- [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

Button group can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.

<Canvas>
  <Story
    name="Overview"
    args={{
      options: [
        { value: 1, text: "Label" },
        { value: 2, text: "Label" },
        { value: 3, text: "Label" },
        { value: 4, text: "Label" }
      ],
      value: 1
    }}
  >
    {buttonGroupTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story={"Overview"} />

## Usage

<UsageGuidelines
  guidelines={[
    "Group together calls to action that are related to each other.",
    "Use when all the actions in the group take place immediately in one click. If one or more actions does not immediately happen in one click, either use a different component, or remove those actions from the group.",
    "Only should be used in groups of up to six buttons if the buttons contain an icon with no text.",
    "The main action of a button group will be in selected mode.",
    <>
      Keep the content short and actionable. For longer actions, use the
      <Link href="/?path=/docs/inputs-dropdown--overview">Dropdown</Link> component.
    </>,
    <>
      Button group is used to diplay the same content in diffrent view, if you need to present diffrent content, use{" "}
      <Link href="/?path=/docs/navigation-tabs-tabs--overview">Tabs.</Link>
    </>
  ]}
/>

<Tip title="Check yourself">
  Button group will always have one button selected. If you need to display addjacent buttons without selected mode, use
  the{" "}
  <Link href="/?path=/docs/buttons-button--overview" size={Link.sizes.SMALL} withoutSpacing>
    Button
  </Link>{" "}
  component with “Flat” props.{" "}
</Tip>

## Variants

### Default

<Canvas>
  <Story name="Default">
    <ButtonGroup
      groupAriaLabel="button group aria label"
      value={1}
      options={[
        { value: 1, text: "Label" },
        { value: 2, text: "Label" },
        { value: 3, text: "Label" },
        { value: 4, text: "Label" }
      ]}
    />
  </Story>
</Canvas>

### Disabled - all buttons

<Canvas>
  <Story name="Disabled">
    <ButtonGroup
      disabled
      groupAriaLabel="button group aria label"
      options={[
        { value: 1, text: "Label" },
        { value: 2, text: "Label" },
        { value: 3, text: "Label" },
        { value: 4, text: "Label" }
      ]}
    />
  </Story>
</Canvas>

### Disabled - single button

<Canvas>
  <Story name="Disabled - Singe Button">
    <ButtonGroup
      groupAriaLabel="button group aria label"
      options={[
        { value: 1, text: "Label" },
        { value: 2, text: "Label" },
        { value: 3, text: "Label" },
        { value: 4, text: "Label", disabled: true, tooltipContent: "I'm the worst variant ever" }
      ]}
    />
  </Story>
</Canvas>

### Size

<Canvas>
  <Story name="Size">
    <div className="l3-storybook-button-group_column">
      Medium
      <ButtonGroup
        groupAriaLabel="button group aria label"
        size={ButtonGroup.sizes.MEDIUM}
        value={1}
        options={[
          { value: 1, text: "Label" },
          { value: 2, text: "Label" },
          { value: 3, text: "Label" },
          { value: 4, text: "Label" }
        ]}
      />
    </div>
    <div className="l3-storybook-button-group_column">
      Small
      <ButtonGroup
        groupAriaLabel="button group aria label"
        size={ButtonGroup.sizes.SMALL}
        value={1}
        options={[
          { value: 1, text: "Label" },
          { value: 2, text: "Label" },
          { value: 3, text: "Label" },
          { value: 4, text: "Label" }
        ]}
      />
    </div>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <ButtonGroup
            groupAriaLabel="button group aria label"
            value={1}
            options={[
              { value: 1, text: "Month" },
              { value: 2, text: "Week" },
              { value: 3, text: "Year" }
            ]}
          />
        ),
        description: "Use when all the actions in the group take place immediately in one click."
      },
      negative: {
        component: (
          <ButtonGroup
            groupAriaLabel="button group aria label"
            value={1}
            options={[
              { value: 1, text: "Main table" },
              { value: 2, text: "Hadas view" },
              { value: 3, text: "Chart view" }
            ]}
          />
        ),
        description: (
          <>
            Don’t use a button group when switching between content or object pages. Use{" "}
            <Link href="/?path=/docs/navigation-tabs-tabs--overview" withoutSpacing>
              Tabs
            </Link>{" "}
            instead.
          </>
        )
      }
    },
    {
      positive: {
        component: (
          <div className="l3-storybook-button-group_column">
            <ButtonGroup
              groupAriaLabel="button group aria label"
              size={ButtonGroup.sizes.MEDIUM}
              value={1}
              options={[
                { value: 1, leftIcon: Desktop },
                { value: 2, leftIcon: Mobile }
              ]}
            />
            <ButtonGroup
              groupAriaLabel="button group aria label"
              size={ButtonGroup.sizes.MEDIUM}
              value={1}
              options={[
                { value: 1, text: "Desktop" },
                { value: 2, text: "Mobile" }
              ]}
            />
            <ButtonGroup
              groupAriaLabel="button group aria label"
              size={ButtonGroup.sizes.MEDIUM}
              value={1}
              options={[
                { value: 1, text: "Desktop", leftIcon: Desktop },
                { value: 2, text: "Mobile", leftIcon: Mobile }
              ]}
            />
          </div>
        ),
        description: "Always use buttons with a consistent style: Icons, text or icon with text."
      },
      negative: {
        component: (
          <ButtonGroup
            groupAriaLabel="button group aria label"
            size={ButtonGroup.sizes.MEDIUM}
            value={1}
            options={[
              { value: 1, text: "Desktop" },
              { value: 2, icon: Mobile }
            ]}
          />
        ),
        description: "Avoid combining text buttons with icon buttons within the same button group."
      }
    },
    {
      positive: {
        component: (
          <ButtonGroup
            groupAriaLabel="button group aria label"
            value={1}
            options={[
              { value: 1, text: "Yearly plan" },
              { value: 2, text: "Monthly plan" },
              { value: 3, text: "Annual Plan" }
            ]}
          />
        ),
        description: "Keep button copy width as simillar as possible."
      },
      negative: {
        component: (
          <ButtonGroup
            groupAriaLabel="button group aria label"
            value={1}
            options={[
              { value: 1, text: "Yearly" },
              { value: 2, text: "Monthly" },
              { value: 3, text: "Annual-half year plan" }
            ]}
          />
        ),
        description: "Avoid mixing long button copy and short copy."
      }
    }
  ]}
/>

## Use cases and examples

### Button group in settings

For example: on the views setttings you can choose only one option.

<Canvas>
  <Story name="Button group in settings">
    <div className="l3-storybook-button-group_column">
      Function
      <ButtonGroup
        groupAriaLabel="button group aria label"
        size={ButtonGroup.sizes.SMALL}
        value={1}
        options={[
          { value: 1, text: "Sum" },
          { value: 2, text: "Average" },
          { value: 3, text: "Median" },
          { value: 4, text: "Min" }
        ]}
      />
    </div>
  </Story>
</Canvas>

### Button group as toggle

Use button group as toggle for change the view between two states.
For on and off actions, use the <Link withoutSpacing href="/?path=/docs/inputs-toggle--overview">Toggle component</Link>.

<Canvas>
  <Story name="Button group as toggle">
    <ButtonGroup
      groupAriaLabel="button group aria label"
      value={1}
      options={[
        { value: 1, text: "Grid" },
        { value: 2, text: "List" }
      ]}
    />
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[TABS, BUTTON, BREADCRUBMS]} />
