import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { boolean, text, select, number } from '@storybook/addon-knobs';
import ChecDataPill from '../../components/ChecDataPill';
import ChecDataPillGroup from '../../components/ChecDataPillGroup';

<Meta title="Components/Data pill" component={ChecDataPill} />

# Data pill

<Props of={ChecDataPill} />

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecDataPill,
      },
      props: {
        color: { default: select('Color', ['gray', 'green', 'orange', 'purple', 'red', 'blue', 'opaque'], 'gray') },
        content: { default: text('Label', 'Label') },
        filled: { default: boolean('Filled', false) },
        background: { default: select('Background', ['light', 'dark'], 'dark') },
        number: { default: number('Number of labels', 1) },
      },
      computed: {
        bg() {
          return `bg-gray-${this.background === 'dark' ? '400' : '100'}`;
        },
        labels() {
          return new Array(this.number).fill(this.content);
        },
      },
      template: `
        <div class="py-6 text-center" :class="bg">
          <div class="space-x-2">
            <ChecDataPill v-for="(label, index) in labels" :key="index" :color="color" :filled="filled">
              {{ label }}
            </ChecDataPill>
          </div>
        </div>`
    }}
  </Story>
</Preview>


<Preview>
  <Story name="Variants">
    {{
      components: {
        ChecDataPill,
      },
      props: {
        background: { default: select('Background', ['light', 'dark'], 'dark') },
      },
      data: () => ({
        colors: ['gray', 'green', 'orange', 'purple', 'red', 'blue', 'opaque'],
      }),
      computed: {
        bg() {
          return `bg-gray-${this.background === 'dark' ? '400' : '100'}`;
        }
      },
      template: `
        <div class="pt-4 pb-6" :class="bg">
          <div class="text-center mt-2 space-x-2" v-for="color in colors">
            <ChecDataPill :color="color">{{ color }}</ChecDataPill>
            <ChecDataPill :color="color" filled>{{ color }}-filled</ChecDataPill>
          </div>
        </div>`
    }}
  </Story>
</Preview>


<Preview>
  <Story name="Grouped">
    {{
      components: {
        ChecDataPill,
        ChecDataPillGroup,
      },
      props: {
        background: { default: select('Background', ['light', 'dark'], 'dark') },
      },
      data: () => ({
        colors: ['gray', 'green', 'orange', 'purple', 'red', 'blue', 'opaque'],
      }),
      computed: {
        bg() {
          return `bg-gray-${this.background === 'dark' ? '400' : '100'}`;
        }
      },
      template: `
        <div class="pt-4 pb-6" :class="bg">
          <ChecDataPillGroup
            v-for="color in colors"
            :key="color"
            class="justify-center mt-2"
          >
            <ChecDataPill :color="color" filled>{{ color }}-filled</ChecDataPill>
            <ChecDataPill :color="color">{{ color }}</ChecDataPill>
          </ChecDataPillGroup>
        </div>`
    }}
  </Story>
</Preview>