import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant} from '../../docs/utils';
import FileHandler, {COLORS_MAP} from './FileHandler';
import {TYPE} from '../icons/Icon';
import FileHandlerA11y from './stories/FileHandler.a11y.mdx';
import Flex from '../flex/Flex';
import {formatTags} from '../../docs/utils';
import PageHeader from 'blocks/PageHeader';
const src =
  // eslint-disable-next-line max-len
  'https://images.unsplash.com/photo-1558349699-1e1c38c05eeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=240&q=80';

<Meta
  title="Components/FileHandler"
  component={FileHandler}
  argTypes={{
    children: {
      control: {
        disable: true,
      },
      table: {
        type: {summary: 'React.Node'},
      },
    },
    textRef: {
      control: {
        disable: true,
      },
    },
    iconType: {
      table: {
        type: {
          summary: formatTags(Object.values(TYPE)),
        },
        defaultValue: {summary: TYPE.ATTACHMENT},
      },
      control: {
        type: 'select',
        options: TYPE,
      },
      defaultValue: 'attachment',
    },
    color: {
      table: {
        type: {
          summary: formatTags(Object.values(COLORS_MAP)),
        },
        defaultValue: {summary: COLORS_MAP['gray-20']},
      },
      control: {
        type: 'select',
        options: Object.values(COLORS_MAP),
      },
      defaultValue: 'gray-20',
    },
    thumbnailSrc: {
      control: {
        type: 'text',
      },
      table: {
        type: {summary: 'string'},
      },
    },
    loading: {
      control: {
        type: 'boolean',
      },
      table: {
        defaultValue: {summary: false},
        type: {summary: 'boolean'},
      },
    },
    onClose: {
      table: {
        category: 'Events',
      },
    },
    onClick: {
      table: {
        category: 'Events',
      },
    },
    className: {
      control: {
        type: 'disable',
      },
      table: {
        type: {summary: 'string'},
      },
    },
    ariaCloseButtonLabel: {
      control: {
        type: 'text',
      },
      table: {
        type: {summary: 'string'},
        defaultValue: {summary: 'Close'},
      },
    },
    statusLabel: {
      control: {
        type: 'object',
      },
      table: {
        defaultValue: {summary: "{loading: 'loading', uploaded: 'uploaded'}"},
        type: {
          summary: '{loading: string, uploaded: string}',
        },
      },
    },
  }}
  args={{
    children: 'avatar.jpg',
  }}
/>

<PageHeader>FileHandler</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <div>
        {Object.values(COLORS_MAP).map(color => (
          <StoryVariant label={`color - ${color}`} key={color}>
            {color === 'white' ? (
              <div className="sg-story-variant-dark-box">
                <FileHandler {...args} color={color} />
              </div>
            ) : (
              <FileHandler {...args} color={color} />
            )}
          </StoryVariant>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Icons

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

### With thumbnail

<Canvas>
  <Story name="With thumbnail" args={{thumbnailSrc: src, src}}>
    {args => <FileHandler {...args} />}
  </Story>
</Canvas>

### Loading

<Canvas>
  <Story name="Loading" args={{loading: true}}>
    {args => <FileHandler {...args} />}
  </Story>
</Canvas>

## Accessibility

<FileHandlerA11y />