import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';

import SpinnerContainer, {
  SPINNER_COLOR,
  SPINNER_SIZE,
} from './SpinnerContainer';
import Box from '../box/Box';
import Flex from '../flex/Flex';
import {StoryVariant, StoryVariantBorderBox} from '../../docs/utils';
import SpinnerContainerA11y from './stories/SpinnerContainer.a11y.mdx';
import PageHeader from 'blocks/PageHeader';
import {formatTags} from '../../docs/utils';

<Meta
  title="Components/SpinnerContainer"
  component={SpinnerContainer}
  argTypes={{
    children: {
      control: {
        disable: true,
      },
    },
    color: {
      control: {
        type: 'select',
        options: SPINNER_COLOR,
      },
      table: {
        type: {
          summary: formatTags(Object.values(SPINNER_COLOR)),
        },
        defaultValue: {
          summary: SPINNER_COLOR['gray-70'],
        },
      },
    },
    size: {
      control: {
        type: 'select',
        options: Object.values(SPINNER_SIZE),
      },
      table: {
        type: {
          summary: formatTags(Object.values(SPINNER_SIZE)),
        },
        defaultValue: {
          summary: SPINNER_SIZE.SMALL,
        },
      },
    },
  }}
  args={{
    children: (
      <Box color="green-30" border borderColor="white">
        Any component could be wrapped into spinner container.
      </Box>
    ),
  }}
/>

<PageHeader>SpinnerContainer</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### Loading state

<Canvas>
  <Story name="loading state" args={{loading: true}}>
    {args => <SpinnerContainer {...args} />}
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="colors" args={{loading: true}}>
    {args => (
      <Flex direction="column">
        {Object.values(SPINNER_COLOR).map(color => (
          <StoryVariant label={`color: ${color}`} key={color}>
            <SpinnerContainer {...args} color={SPINNER_COLOR[color]} />
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="sizes" args={{loading: true}}>
    {args => (
      <Flex direction="column">
        {Object.values(SPINNER_SIZE).map(size => (
          <StoryVariant label={`size: ${size}`} key={size}>
            <SpinnerContainer {...args} size={size} />
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Full Width

<Canvas>
  <Story name="full width" args={{loading: true, fullWidth: true}}>
    {args => (
      <StoryVariantBorderBox>
        <SpinnerContainer {...args} />
      </StoryVariantBorderBox>
    )}
  </Story>
</Canvas>

## Accessibility

<SpinnerContainerA11y />