import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import Button, {BUTTON_SIZE, BUTTON_VARIANT, BUTTON_TOGGLE} from './Button';
import Icon, {TYPE as ICON_TYPES} from 'icons/Icon';
import hex from '../colors/hex';
import {StoryVariantTable} from '../../docs/utils';
import Headline from '../text/Headline';
import PageHeader from 'blocks/PageHeader';
import ButtonA11y from './stories/Button.a11y.mdx';
const iconSize = {
  [BUTTON_SIZE.S]: 16,
  [BUTTON_SIZE.M]: 24,
  [BUTTON_SIZE.L]: 32,
};

<Meta
  title="Components/Button"
  component={Button}
  argTypes={{
    children: {
      control: {
        type: 'text',
      },
    },
    icon: {
      control: {
        type: 'select',
        options: ICON_TYPES,
      },
    },
    onClick: {
      table: {
        category: 'Events',
      },
    },
  }}
  args={{
    children: 'button',
    onClick: () => console.log('button clicked'),
  }}
/>

<PageHeader>Button</PageHeader>

- [Stories](#stories)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story name="Default">
    {args => {
      return (
        <Button
          {...args}
          icon={
            args.icon ? (
              <Icon
                size={iconSize[args.size]}
                type={args.icon}
                color="adaptive"
              />
            ) : null
          }
        />
      );
    }}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Variants

<Canvas>
  <Story name="Variants">
    {args => (
      <StoryVariantTable className="sg-button-stories-table">
        <thead>
          <tr>
            <th />
            <th>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                default
              </Headline>
            </th>
            <th>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                disabled
              </Headline>
            </th>
            <th>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                loading
              </Headline>
            </th>
            <th>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                with icon
              </Headline>
            </th>
            <th>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                icon only
              </Headline>
            </th>
            <th>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                toggle
              </Headline>
            </th>
          </tr>
        </thead>
        <tbody>
          {[
            BUTTON_VARIANT.SOLID,
            BUTTON_VARIANT.SOLID_INVERTED,
            BUTTON_VARIANT.SOLID_INDIGO,
            BUTTON_VARIANT.SOLID_INDIGO_INVERTED,
            BUTTON_VARIANT.SOLID_LIGHT,
            BUTTON_VARIANT.OUTLINE,
            BUTTON_VARIANT.OUTLINE_INDIGO,
            BUTTON_VARIANT.OUTLINE_INVERTED,
            BUTTON_VARIANT.TRANSPARENT,
            BUTTON_VARIANT.TRANSPARENT_LIGHT,
            BUTTON_VARIANT.TRANSPARENT_RED,
            BUTTON_VARIANT.TRANSPARENT_INVERTED,
            BUTTON_VARIANT.FACEBOOK,
            BUTTON_VARIANT.GOOGLE,
            BUTTON_VARIANT.APPLE,
          ].map(buttonVariant => (
            <tr
              style={{
                backgroundColor: [
                  'solid-inverted',
                  'solid-indigo-inverted',
                  'transparent-inverted',
                  'outline-inverted',
                ].includes(buttonVariant)
                  ? hex.black
                  : 'transparent',
              }}
              key={buttonVariant}
            >
              <td>
                <div
                  style={{
                    height: 40,
                    display: 'flex',
                    alignItems: 'center',
                  }}
                >
                  <Headline
                    extraBold
                    transform="uppercase"
                    as="span"
                    color={
                      [
                        'solid-inverted',
                        'solid-indigo-inverted',
                        'transparent-inverted',
                        'outline-inverted',
                      ].includes(buttonVariant)
                        ? 'text-white'
                        : 'text-gray-40'
                    }
                    size="medium"
                  >
                    {buttonVariant.toLowerCase()}
                  </Headline>
                </div>
              </td>
              <td>
                <div>
                  <Button {...args} variant={buttonVariant} />
                </div>
              </td>
              <td>
                <Button {...args} variant={buttonVariant} disabled />
              </td>
              <td>
                <Button {...args} variant={buttonVariant} loading />
              </td>
              <td>
                {[
                  BUTTON_VARIANT.SOLID,
                  BUTTON_VARIANT.SOLID_INVERTED,
                  BUTTON_VARIANT.SOLID_INDIGO,
                  BUTTON_VARIANT.SOLID_INDIGO_INVERTED,
                  BUTTON_VARIANT.SOLID_LIGHT,
                  BUTTON_VARIANT.OUTLINE,
                  BUTTON_VARIANT.OUTLINE_INDIGO,
                  BUTTON_VARIANT.OUTLINE_INVERTED,
                  BUTTON_VARIANT.TRANSPARENT,
                  BUTTON_VARIANT.TRANSPARENT_LIGHT,
                  BUTTON_VARIANT.TRANSPARENT_RED,
                  BUTTON_VARIANT.TRANSPARENT_INVERTED,
                ].includes(buttonVariant) ? (
                  <Button
                    {...args}
                    variant={buttonVariant}
                    icon={
                      <Icon type={ICON_TYPES.HEART_OUTLINED} color="adaptive" />
                    }
                  />
                ) : null}
                {buttonVariant === BUTTON_VARIANT.GOOGLE ? (
                  <Button
                    {...args}
                    variant={buttonVariant}
                    icon={<Icon type={ICON_TYPES.GOOGLE} color="adaptive" />}
                  />
                ) : null}
                {buttonVariant === BUTTON_VARIANT.FACEBOOK ? (
                  <Button
                    {...args}
                    variant={buttonVariant}
                    icon={<Icon type={ICON_TYPES.FACEBOOK} color="adaptive" />}
                  />
                ) : null}
                {buttonVariant === BUTTON_VARIANT.APPLE ? (
                  <Button
                    {...args}
                    variant={buttonVariant}
                    icon={<Icon type={ICON_TYPES.APPLE} color="adaptive" />}
                  />
                ) : null}
              </td>
              <td>
                {[
                  BUTTON_VARIANT.SOLID,
                  BUTTON_VARIANT.SOLID_INVERTED,
                  BUTTON_VARIANT.SOLID_INDIGO,
                  BUTTON_VARIANT.SOLID_INDIGO_INVERTED,
                  BUTTON_VARIANT.SOLID_LIGHT,
                  BUTTON_VARIANT.OUTLINE,
                  BUTTON_VARIANT.OUTLINE_INDIGO,
                  BUTTON_VARIANT.OUTLINE_INVERTED,
                  BUTTON_VARIANT.TRANSPARENT,
                  BUTTON_VARIANT.TRANSPARENT_LIGHT,
                  BUTTON_VARIANT.TRANSPARENT_RED,
                  BUTTON_VARIANT.TRANSPARENT_INVERTED,
                ].includes(buttonVariant) ? (
                  <Button
                    {...args}
                    variant={buttonVariant}
                    iconOnly
                    icon={
                      <Icon type={ICON_TYPES.HEART_OUTLINED} color="adaptive" />
                    }
                  />
                ) : null}
              </td>
              <td>
                {[
                  'solid-light',
                  'outline',
                  'transparent',
                  'transparent-light',
                ].includes(buttonVariant)
                  ? [null, ...Object.values(BUTTON_TOGGLE)].map(toggleType => (
                      <div style={{marginBottom: '15px'}} key={toggleType}>
                        <Button
                          {...args}
                          icon={
                            <Icon type={ICON_TYPES.HEART} color="adaptive" />
                          }
                          variant={buttonVariant}
                          toggle={toggleType}
                        />
                      </div>
                    ))
                  : null}
                {[
                  'outline-indigo',
                  'outline-inverted',
                  'transparent-red',
                  'transparent-inverted',
                ].includes(buttonVariant) ? (
                  <div style={{marginBottom: '15px'}} key={buttonVariant}>
                    <Button
                      {...args}
                      icon={<Icon type={ICON_TYPES.HEART} color="adaptive" />}
                      variant={buttonVariant}
                    />
                  </div>
                ) : null}
              </td>
            </tr>
          ))}
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <StoryVariantTable>
        <tbody>
          <tr>
            <td>
              <StoryVariantTable>
                <tbody>
                  <tr>
                    <td />
                    <td>
                      <Headline
                        extraBold
                        transform="uppercase"
                        as="span"
                        color="text-gray-40"
                        size="medium"
                      >
                        solid default
                      </Headline>
                    </td>
                    <td>
                      <Headline
                        extraBold
                        transform="uppercase"
                        as="span"
                        color="text-gray-40"
                        size="medium"
                      >
                        solid icon left
                      </Headline>
                    </td>
                    <td>
                      <Headline
                        extraBold
                        transform="uppercase"
                        as="span"
                        color="text-gray-40"
                        size="medium"
                      >
                        solid icon right
                      </Headline>
                    </td>
                  </tr>
                  {Object.values(BUTTON_SIZE).map(size => (
                    <tr key={size}>
                      <td>
                        <Headline
                          extraBold
                          transform="uppercase"
                          as="span"
                          color="text-gray-40"
                          size="medium"
                        >
                          {size}
                        </Headline>
                      </td>
                      <td>
                        <Button {...args} size={size}>
                          button
                        </Button>
                      </td>
                      <td>
                        <Button
                          {...args}
                          size={size}
                          icon={
                            <Icon type={ICON_TYPES.ANSWER} color="adaptive" />
                          }
                        >
                          button
                        </Button>
                      </td>
                      <td>
                        <Button
                          {...args}
                          size={size}
                          icon={
                            <Icon type={ICON_TYPES.ANSWER} color="adaptive" />
                          }
                          reversedOrder
                        >
                          button
                        </Button>
                      </td>
                    </tr>
                  ))}
                  <tr>
                    <td>
                      <div style={{height: '50px'}} />
                    </td>
                  </tr>
                  <tr>
                    <td />
                    <td>
                      <Headline
                        extraBold
                        transform="uppercase"
                        as="span"
                        color="text-gray-40"
                        size="medium"
                      >
                        transparent default
                      </Headline>
                    </td>
                    <td>
                      <Headline
                        extraBold
                        transform="uppercase"
                        as="span"
                        color="text-gray-40"
                        size="medium"
                      >
                        transparent icon left
                      </Headline>
                    </td>
                    <td>
                      <Headline
                        extraBold
                        transform="uppercase"
                        as="span"
                        color="text-gray-40"
                        size="medium"
                      >
                        transparent icon right
                      </Headline>
                    </td>
                  </tr>
                  {Object.values(BUTTON_SIZE).map(size => (
                    <tr key={size}>
                      <td>
                        <Headline
                          extraBold
                          transform="uppercase"
                          as="span"
                          color="text-gray-40"
                          size="medium"
                        >
                          {size}
                        </Headline>
                      </td>
                      <td>
                        <Button {...args} size={size} variant="transparent">
                          button
                        </Button>
                      </td>
                      <td>
                        <Button
                          {...args}
                          size={size}
                          icon={
                            <Icon type={ICON_TYPES.ANSWER} color="adaptive" />
                          }
                          variant="transparent"
                        >
                          button
                        </Button>
                      </td>
                      <td>
                        <Button
                          {...args}
                          size={size}
                          icon={
                            <Icon type={ICON_TYPES.ANSWER} color="adaptive" />
                          }
                          reversedOrder
                          variant="transparent"
                        >
                          button
                        </Button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </StoryVariantTable>
            </td>
          </tr>
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>

### Full width

<Canvas>
  <Story name="Full width">
    {args => {
      return (
        <div style={{width: 400, border: '1px solid black', padding: 3}}>
          <Button {...args} fullWidth>
            full width of the box
          </Button>
        </div>
      );
    }}
  </Story>
</Canvas>

## Accessibility

<ButtonA11y />