import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariantTable} from '../../docs/utils';
import IconAsButton, {SIZE, ICON_COLOR} from './IconAsButton';
import {TYPE as ICON_TYPES} from 'icons/Icon';
import Flex from '../flex/Flex';
import PageHeader from 'blocks/PageHeader';
import Headline from '../text/Headline';
import classnames from 'classnames';
import {formatTags} from '../../docs/utils';

<Meta
  title="Components/IconAsButton"
  component={IconAsButton}
  argTypes={{
    type: {
      control: {type: 'select', options: ICON_TYPES},
      table: {
        type: {summary: formatTags(Object.values(ICON_TYPES))},
      },
    },
    size: {table: {defaultValue: {summary: SIZE.NORMAL}}},
    color: {
      control: {type: 'select', options: ICON_COLOR},
      table: {
        type: {summary: formatTags(Object.values(ICON_COLOR))},
      },
    },
    children: {
      control: {
        disable: true,
      },
    },
  }}
  args={{
    type: ICON_TYPES.ACADEMIC_CAP,
    color: ICON_COLOR['icon-black'],
  }}
/>

<PageHeader>IconAsButton</PageHeader>

- [Stories](#stories)

## Overview

<Canvas>
  <Story name="Default">{args => <IconAsButton {...args} />}</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Types

<Canvas>
  <Story name="Types">
    {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"
              >
                border
              </Headline>
            </th>
            <th>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                action
              </Headline>
            </th>
            <th>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                transparent
              </Headline>
            </th>
          </tr>
        </thead>
        <tbody>
          {Object.values(SIZE).map(size => (
            <tr key={size}>
              <td>
                <div
                  style={{
                    height: 40,
                    display: 'flex',
                    alignItems: 'center',
                  }}
                >
                  <Headline
                    extraBold
                    transform="uppercase"
                    as="span"
                    color="text-gray-40"
                    size="medium"
                  >
                    {size.toLowerCase()}
                  </Headline>
                </div>
              </td>
              <td>
                <div>
                  <IconAsButton {...args} size={size} />
                </div>
              </td>
              <td>
                <IconAsButton {...args} size={size} border />
              </td>
              <td>
                <IconAsButton {...args} size={size} action />
              </td>
              <td>
                <IconAsButton {...args} size={size} transparent />
              </td>
            </tr>
          ))}
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <Flex wrap>
        {Object.values(ICON_COLOR)
          // Since this component is deprecated and active states for shade 60 is not provided we're not presenting examples for that color
          .filter(color => !color.includes('60'))
          .map(color => (
            <div
              key={color}
              className={classnames('sg-icon-story-variant', {
                'sg-story-variant-dark-box': color === ICON_COLOR['icon-white'],
              })}
              style={{padding: 10}}
            >
              <IconAsButton {...args} color={color} />
            </div>
          ))}
      </Flex>
    )}
  </Story>
</Canvas>