import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { text, select, boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import ChecTag from '../../components/ChecTag';
import ChecTagGroup from '../../components/ChecTagGroup';

<Meta title="Components/Tag" component={ChecTag} />

# Tag

<Props of={ChecTag} />

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecTag,
      },
      props: {
        color: {
          default: select('Color', ['white', 'dark-grey']),
        },
        tagText: {
          default: text('Tag text', 'I am tag')
        },
        active: {
          type: Boolean,
          default: () => boolean('Active', false),
        },
        background: {
          default: select('Background Color', ['light', 'dark']),
        },
        disabled: {
          type: Boolean,
          default: () => boolean('Disabled', false),
        },
        undismissible: {
          type: Boolean,
          default: () => boolean('Undismissible', false),
        },
      },
      methods: {
        handleDismiss: action('dismiss'),
      },
      template: `
        <div class="py-16 w-full flex justify-around" :class="{'bg-gray-600': background === 'dark'}">
          <ChecTag
            :color="color"
            :active="active"
            :disabled="disabled"
            :undismissible="undismissible"
            @dismiss="handleDismiss"
          >
            {{ tagText }}
          </ChecTag>
        </div>`
    }}
  </Story>
</Preview>

# Tag

<Props of={ChecTag} />

<Preview>
  <Story name="States">
    {{
      components: {
        ChecTag,
      },
      props: {
        tagText: {
          default: text('Tag text', 'I am tag')
        },
        active: {
          type: Boolean,
          default: () => boolean('Active', false),
        },
        disabled: {
          type: Boolean,
          default: () => boolean('Disabled', false),
        },
        background: {
          default: select('Background Color', ['light', 'dark']),
        },
        undismissible: {
          type: Boolean,
          default: () => boolean('Undismissible', false),
        },
      },
      computed: {
        colors() {
          return ['dark-grey', 'white'];
        }
      },
      methods: {
        handleDismiss: action('dismiss'),
      },
      template: `
        <div class="py-16 w-full flex justify-around" :class="{'bg-gray-600': background === 'dark'}">
          <div v-for="color in colors" class="mb-4">
            <ChecTag
              :color="color"
              :active="active"
              :disabled="disabled"
              :undismissible="undismissible"
              @dismiss="handleDismiss"
            >
              {{ tagText }}
            </ChecTag>
          </div>
        </div>`
    }}
  </Story>
</Preview>

## Group

<Preview>
  <Story name="Group">
    {{
      components: {
        ChecTag,
        ChecTagGroup,
      },
      props: {
        color: {
          default: select('Color', ['dark-grey', 'white']),
        },
        undismissible: {
          type: Boolean,
          default: () => boolean('Undismissible', false),
        },
        hideReset: {
          type: Boolean,
          default: () => boolean('Hide reset', false),
        },
      },
      methods: {
        handleDismiss: action('dismiss'),
        handleReset: action('reset'),
      },
      template: `
        <div class="mx-auto max-w-4xl pt-6">
          <ChecTagGroup :hide-reset="hideReset" @reset="handleReset">
            <ChecTag :color="color" :undismissible="undismissible" @dismiss="handleDismiss">
              Marketing
            </ChecTag>
            <ChecTag :color="color" :undismissible="undismissible" active @dismiss="handleDismiss">
              Developers and designers
            </ChecTag>
            <ChecTag :color="color" :undismissible="undismissible" active disabled @dismiss="handleDismiss">
              Come and talk to us now, we will solve all of your problems!
            </ChecTag>
            <ChecTag :color="color" :undismissible="undismissible" disabled @dismiss="handleDismiss">
              Guides &amp; tutorials
            </ChecTag>
            <ChecTag :color="color" :undismissible="undismissible" @dismiss="handleDismiss">
              Developers and designers
            </ChecTag>
          </ChecTagGroup>
        </div>`
    }}
  </Story>
</Preview>
