import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import {
  Examples,
  Example,
  Note,
  Title,
  CustomArgsTable,
  VariantsTable,
  VariantRow,
} from "@calcom/storybook/components";

import { Button } from "../button/Button";
import { Trash, Navigation, Clipboard } from "../icon";
import { ButtonGroup } from "./ButtonGroup";

<Meta title="UI/Button Group" component={ButtonGroup} />

<Title title="Button Group" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />

## Definition

Button group enables multiple buttons to be combined into a single unit. It offers users access to frequently performed, related actions.

## Structure

<CustomArgsTable of={ButtonGroup} />

<Examples
  title="Breadcrumb style"
  footNote={
    <ul>
      <li>
        Seperated: In general, seperated button group style can be included in container such as card, modal,
        and page.
      </li>
      <li>Combined: Combined button group can be used standalone e.g. mini toggles for calendars</li>
    </ul>
  }>
  <Example title="Default">
    <ButtonGroup>
      <Button StartIcon={Trash} variant="icon" color="secondary" />
      <Button StartIcon={Navigation} variant="icon" color="secondary" />
      <Button StartIcon={Clipboard} variant="icon" color="secondary" />
    </ButtonGroup>
  </Example>
  <Example title="Combined">
    <ButtonGroup combined>
      <Button StartIcon={Trash} variant="icon" color="secondary" />
      <Button StartIcon={Navigation} variant="icon" color="secondary" />
      <Button StartIcon={Clipboard} variant="icon" color="secondary" />
    </ButtonGroup>
  </Example>
</Examples>

<Canvas>
  <Story name="All Variants">
    <VariantsTable titles={["Default", "Secondary", "Minimal"]} columnMinWidth={150}>
      <VariantRow variant="Default">
        <ButtonGroup>
          <Button StartIcon={Trash} variant="icon" />
          <Button StartIcon={Navigation} variant="icon" />
          <Button StartIcon={Clipboard} variant="icon" />
        </ButtonGroup>
        <ButtonGroup>
          <Button StartIcon={Trash} variant="icon" color="secondary" />
          <Button StartIcon={Navigation} variant="icon" color="secondary" />
          <Button StartIcon={Clipboard} variant="icon" color="secondary" />
        </ButtonGroup>
        <ButtonGroup>
          <Button StartIcon={Trash} variant="icon" color="minimal" />
          <Button StartIcon={Navigation} variant="icon" color="minimal" />
          <Button StartIcon={Clipboard} variant="icon" color="minimal" />
        </ButtonGroup>
      </VariantRow>
      <VariantRow variant="Combined">
        <ButtonGroup combined>
          <Button StartIcon={Trash} variant="icon" />
          <Button StartIcon={Navigation} variant="icon" />
          <Button StartIcon={Clipboard} variant="icon" />
        </ButtonGroup>
        <ButtonGroup combined>
          <Button StartIcon={Trash} variant="icon" color="secondary" />
          <Button StartIcon={Navigation} variant="icon" color="secondary" />
          <Button StartIcon={Clipboard} variant="icon" color="secondary" />
        </ButtonGroup>
      </VariantRow>
    </VariantsTable>
  </Story>
</Canvas>

<Canvas>
  <Story
    name="ButtonGroup Playground"
    args={{
      color: "secondary",
      combined: false,
    }}
    argTypes={{
      color: {
        control: {
          type: "select",
          options: ["primary", "secondary", "minimal"],
        },
      },
      combined: {
        control: {
          type: "boolean",
        },
      },
    }}>
    {({ color, combined }) => (
      <VariantsTable titles={[`${color}`]} columnMinWidth={150}>
        <VariantRow variant="">
          <ButtonGroup combined={combined}>
            <Button StartIcon={Trash} variant="icon" color={color} />
            <Button StartIcon={Navigation} variant="icon" color={color} />
            <Button StartIcon={Clipboard} variant="icon" color={color} />
          </ButtonGroup>
        </VariantRow>
      </VariantsTable>
    )}
  </Story>
</Canvas>