import React from 'react'
import withDesignTokens from 'addons/tokens/index.js'
import { Stories } from '@storybook/addon-docs'
import {
  ctrl,
  DocStoryList,
  DocStoryContainer,
  FlexCell,
  FlexList,
} from '../../../docs/blocks/index'
import { Button } from '../lib'
import { ButtonGroup } from '../lib'
import { AddCircleOutline, ChevronRight } from '@kyper/icon'
import { useTokens } from '@kyper/tokenprovider'

const StoryList = () => <DocStoryList stories={<Stories includePrimary={true} title="Button" />} />

export default {
  component: Button,
  decorators: [withDesignTokens],
  parameters: {
    controls: { hideNoControlsWarning: true },
    docs: {
      page: StoryList,
    },
    previewTabs: {
      canvas: { hidden: true },
      'storybook/docs/panel': { hidden: true },
    },
  },
  title: 'FORM COMPONENTS/Button/Code Examples',
}

const Template = args => {
  const buttonArgs = { ...args }

  delete buttonArgs.sandboxButtonText

  return (
    <DocStoryContainer title="Button Sandbox">
      <FlexCell codeImport={`import { Button } from '@kyper/button'`} codeViewer="always">
        <Button {...buttonArgs}>{args.sandboxButtonText}</Button>
      </FlexCell>
    </DocStoryContainer>
  )
}

export const ButtonSandbox = Template.bind({})
ButtonSandbox.storyName = 'Sandbox'
ButtonSandbox.args = {
  sandboxButtonText: 'Neutral Button',
}
ButtonSandbox.argTypes = {
  disabled: ctrl.type.boolean,
  onClick: ctrl.hide,
}

export const ButtonVariations = () => {
  const tokens = useTokens()

  return (
    <DocStoryContainer title="Button Variations">
      <FlexList>
        <FlexCell
          codeImport={`import {Button, ButtonGroup} from '@kyper/button'`}
          codeViewer="collapse"
          title="Primary"
        >
          <ButtonGroup>
            <Button variant="primary">Primary</Button>
            <Button disabled={true} variant="primary">
              Primary Disabled
            </Button>
          </ButtonGroup>
        </FlexCell>
        <FlexCell
          codeImport={`import {Button, ButtonGroup} from '@kyper/button'`}
          codeViewer="collapse"
          title="Neutral"
        >
          <ButtonGroup>
            <Button>Neutral</Button>
            <Button disabled={true}>Neutral Disabled</Button>
          </ButtonGroup>
        </FlexCell>
        <FlexCell
          codeImport={`import {Button, ButtonGroup} from '@kyper/button'`}
          codeViewer="collapse"
          title="Destructive"
        >
          <ButtonGroup>
            <Button variant="destructive">Destructive</Button>
            <Button disabled={true} variant="destructive">
              Destructive Disabled
            </Button>
          </ButtonGroup>
        </FlexCell>
        <FlexCell
          codeImport={`import {Button, ButtonGroup} from '@kyper/button'`}
          codeViewer="collapse"
          title="Transparent"
        >
          <ButtonGroup>
            <Button variant="transparent">Transparent</Button>
            <Button disabled={true} variant="transparent">
              Transparent Disabled
            </Button>
          </ButtonGroup>
        </FlexCell>
        <FlexCell
          codeImport={`import { Button, ButtonGroup } from '@kyper/button'`}
          codeViewer="collapse"
          title="Transparent Destructive"
        >
          <ButtonGroup>
            <Button variant="transparent-destructive">Transparent Destructive</Button>
            <Button disabled={true} variant="transparent-destructive">
              Transparent Destructive Disabled
            </Button>
          </ButtonGroup>
        </FlexCell>
        <FlexCell
          codeImport={`import {Button, ButtonGroup} from '@kyper/button'`}
          codeViewer="collapse"
          title="Transparent Tertiary"
        >
          <ButtonGroup>
            <Button variant="transparent-tertiary">Transparent Tertiary</Button>
            <Button disabled={true} variant="transparent-tertiary">
              Transparent Tertiary Disabled
            </Button>
          </ButtonGroup>
        </FlexCell>
        <FlexCell
          codeImport={`import {Button, ButtonGroup} from '@kyper/button'`}
          codeViewer="collapse"
          title="Links"
        >
          <ButtonGroup>
            <Button variant="link">Link Button</Button>
            <Button variant="link-tertiary">Link Tertiary</Button>
            <Button variant="link-destructive">Link Destructive</Button>
          </ButtonGroup>
        </FlexCell>
        <FlexCell
          codeImport={`import {Button, ButtonGroup} from '@kyper/button'`}
          codeViewer="collapse"
          title="Small Links"
        >
          <ButtonGroup>
            <Button size="small" variant="link">
              Link Button Small
            </Button>
            <Button size="small" variant="link-tertiary">
              Link Tertiary Small
            </Button>
            <Button size="small" variant="link-destructive">
              Link Destructive Small
            </Button>
          </ButtonGroup>
        </FlexCell>
        <FlexCell
          codeImport={`import {Button, ButtonGroup} from '@kyper/button'`}
          codeViewer="collapse"
          title="Buttons with icons"
        >
          <ButtonGroup>
            <Button variant="primary">
              Right icon
              <AddCircleOutline
                color="currentColor"
                style={{ marginLeft: tokens.Spacing.XSmall }}
              />
            </Button>
            <Button>
              <AddCircleOutline
                color="currentColor"
                style={{ marginRight: tokens.Spacing.XSmall }}
              />
              Left icon
            </Button>
            <Button size="small" variant="link">
              <AddCircleOutline
                color="currentColor"
                height={12}
                style={{ marginRight: tokens.Spacing.Tiny }}
                width={12}
              />
              Left icon Small
            </Button>
            <Button size="small" variant="link-tertiary">
              Right icon Small
              <ChevronRight
                color="currentColor"
                height={12}
                style={{ marginLeft: tokens.Spacing.Tiny }}
                width={12}
              />
            </Button>
          </ButtonGroup>
        </FlexCell>
      </FlexList>
    </DocStoryContainer>
  )
}
ButtonVariations.storyName = 'Variations'
