import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import Rating, {RATING_SIZE} from './Rating';
import {StoryVariant} from '../../docs/utils';
import {formatTags} from '../../docs/utils';
import PageHeader from 'blocks/PageHeader';
import RatingA11y from './stories/Rating.a11y.mdx';

<Meta
  title="Components/Rating"
  component={Rating}
  args={{rate: 2.4, counterText: '34 votes'}}
  argTypes={{
    size: {
      table: {defaultValue: {summary: RATING_SIZE.XS}},
    },
    onMouseLeave: {
      table: {
        category: 'Events',
      },
    },
    onStarMouseEnter: {
      table: {
        category: 'Events',
      },
    },
    onChange: {
      table: {
        category: 'Events',
      },
    },
  }}
/>

<PageHeader>Rating</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <div>
        {Object.values(RATING_SIZE).map(size => {
          return (
            <StoryVariant label={`size - ${size}`} key={size}>
              <Rating {...args} size={size} />
            </StoryVariant>
          );
        })}
      </div>
    )}
  </Story>
</Canvas>

### Active

<Canvas>
  <Story name="Active">
    {args => <Rating {...args} active activeText="Rate!" />}
  </Story>
</Canvas>

### No Labels

<Canvas>
  <Story name="No Labels">
    {args => <Rating {...args} noLabel counterText="" />}
  </Story>
</Canvas>

## Accessibility

<RatingA11y />