import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
import { Trash, Navigation, Clipboard } from '../icon';
import { ButtonGroup} from './ButtonGroup';
import { Button} from '../button/Button';

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