import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant} from '../../docs/utils';
import MobileIcon, {TYPE, ICON_COLOR} from './MobileIcon';
import Flex from '../flex/Flex';
import PageHeader from 'blocks/PageHeader';
import {formatTags} from '../../docs/utils';

<Meta
  title="Components/MobileIcon"
  component={MobileIcon}
  argTypes={{
    color: {
      control: {type: 'select', options: ICON_COLOR},
      table: {
        type: {
          summary: formatTags(Object.values(ICON_COLOR)),
        },
      },
    },
  }}
  args={{
    type: TYPE.ANSWER_BUBBLE,
    color: ICON_COLOR.ADAPTIVE,
  }}
/>

<PageHeader>MobileIcon</PageHeader>

- [Stories](#stories)

## Overview

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

<ArgsTable story="Default" />

## Stories

### Types

<Canvas>
  <Story name="Types">
    {args => (
      <Flex wrap>
        {Object.values(TYPE).map(type => (
          <StoryVariant label={`type - ${type}`} width={200} key={type}>
            <MobileIcon {...args} type={type} />
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <Flex wrap>
        {[
          104, 102, 80, 78, 56, 54, 40, 32, 30, 26, 24, 22, 20, 18, 16, 14, 10,
        ].map(size => (
          <StoryVariant label={`size - ${size}`} width={200} key={size}>
            <MobileIcon {...args} size={size} />
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <Flex wrap>
        {Object.values(ICON_COLOR).map(color => (
          <StoryVariant label={`color - ${color}`} width={200} key={color}>
            <MobileIcon {...args} color={color} />
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>