import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplStatsGrid from './RplStatsGrid.vue'
import RplStatsGridItem from './RplStatsGridItem.vue'
import RplContent from '../content/RplContent.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'
import { bpMin } from '../../lib/breakpoints'

export const SingleTemplate = (args) => ({
  components: { RplStatsGrid, RplStatsGridItem, RplContent },
  setup() {
    return { args }
  },
  template: `
    <RplStatsGrid :variant="args.variant">
      <RplStatsGridItem v-for="item in args.items" :value="item.stat">
        <span v-html="item.label" />
      </RplStatsGridItem>
    </RplStatsGrid>
  `
})

<Meta
  title='Core/Containers/Stats grid'
  component={RplStatsGrid}
  parameters={{
    chromatic: {
      viewports: [bpMin.s - 100, bpMin.s, bpMin.m, bpMin.l, bpMin.xl]
    }
  }}
  argTypes={{
    variant: {
      control: { type: 'radio' },
      options: ['onLight', 'onDark'],
    }
  }}
  args={{
    variant: 'onLight',
    items: [
      {
        "stat": "One long stat",
        "label": "Descriptive label"
      },
      {
        "stat": "6000",
        "label": "Descriptive label"
      },
      {
        "stat": "22%",
        "label": "Descriptive label"
      },
      {
        "stat": "$3,000,000",
        "label": "Descriptive label"
      },
      {
        "stat": "4 Hours",
        "label": "Descriptive label"
      },
      {
        "stat": "555",
        "label": "Descriptive label"
      },
      {
        "stat": "One more longer statistic",
        "label": "Descriptive label"
      },
      {
        "stat": "7,500,000,000",
        "label": "Descriptive label this one should fill the mobile width"
      }
    ]
  }}
/>

# Stats grid

<ArgsTable of={RplStatsGrid} />

<Canvas>
  <Story
    name='On light'
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='On dark'
    args={{
      variant: 'onDark'
    }}
    play={a11yStoryCheck}
    parameters={{
      background: 'gray',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
