import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { action } from "@storybook/addon-actions";
import { withKnobs, object, boolean, text, select } from '@storybook/addon-knobs';
import StoryRouter from 'storybook-vue-router';
import ChecButton from '../../components/ChecButton.vue';
import CloseIcon from '../../assets/svgs/close-icon.svg';
import ChecIcon from '../../components/ChecIcon.vue';
import makeVariants from '../helpers/makeVariants';

<Meta title="Form fields/Button" component={ChecButton} />

# Button

A multi-functional button that handles external links, internal links and generic button clicks

<details>
<summary>
Todo list
</summary>

- Support Vue router

</details>

<Props of={ChecButton} />

## Default

<Preview>
  <Story name="Defaults">
    {{
      components: {
        ChecButton,
        ChecIcon
      },
      props: {
        color: {
          default: select('Color', ['brand', 'primary', 'secondary', 'blue', 'green', 'red', 'purple', 'orange', 'gray', 'white'], 'secondary'),
        },
        variant: {
          default: select('Variant', ['regular', 'small', 'round', 'tag'], 'regular'),
        },
        disabled: {
          default: boolean('Disabled', false),
        },
        textOnly: {
          default: boolean('"Text only" variant', false),
        },
        label: {
          default: text('Label', 'Button text'),
        },
        hasIcon: {
          default: boolean('Show Icon', true),
        },
        icon: {
          default: select('Icon', ['left', 'right', 'down', 'up', 'plus', 'close', 'check', 'more', 'download', 'upload', 'grip', 'minus', 'copy', 'trash'], 'plus'),
        },
        iconPosition: {
          default: select('Icon Position', ['before', 'after'], 'before'),
        },
        tagType: {
          default: select('Tag type', ['button', 'link'], 'button'),
        },
        background: {
          default: select('Background', ['light', 'dark'], 'light'),
        },
        outline: {
          default: boolean('Outlined button', false),
        },
      },
      computed: {
        bgClass() {
          return this.background === 'dark' ? 'bg-gray-600' : 'bg-white'
        },
      },
      template: `
        <div class="p-16 flex justify-center" :class="bgClass">
          <chec-button
            :color="color"
            :variant="variant"
            :icon-position="iconPosition"
            :disabled="disabled"
            :outline="outline"
            :icon="hasIcon ? icon : null"
            :tag-type="tagType"
            :text-only="textOnly"
            @click="action"
          >
            {{label}}
          </chec-button>
        </div>
      `,
      methods: { action: action("clicked") }
    }}
  </Story>
</Preview>

## States and sizes

This is a button modified using the Color and Variant props.

<Preview>
  <Story name="States and sizes" decorators={[withKnobs()]}>
    {{
      props: {
        outline: {
          default: boolean('Outlined button', false),
        },
        background: {
          default: select('Background', ['light', 'dark'], 'light'),
        },
      },
      computed: {
        possibilities() {
          return makeVariants({
            color: ['brand', 'primary', 'secondary', 'blue', 'green', 'red', 'purple', 'orange'],
            variant: ['regular', 'small', 'round', 'tag'],
          }).map(possibility => ({
            ...possibility,
            label: `${possibility.color} - ${possibility.variant}`,
          }));
        },
        bgClass() {
          return this.background === 'dark' ? 'bg-gray-600' : 'bg-white'
        },
      },
      components: {
        ChecButton
      },
      template: `
        <div class="py-16 px-20 grid grid-cols-4 gap-4 justify-center" :class="bgClass">
          <div v-for="{ color, variant, label } in possibilities">
            <chec-button :outline="outline" class="mx-auto capitalize" :color="color" :variant="variant">
              {{ label }}
            </chec-button>
          </div>
        </div>`,
        methods: { action: action("clicked") }
    }}
  </Story>
</Preview>

## As a router-link

<Preview>
  <Story name="As a router-link" decorators={[StoryRouter({}, {
    initialEntry: "/",
    routes: [
      {
        path: '/test',
        name: 'test',
      },
    ]
  })]}>
    {{
      components: {
        ChecButton,
      },
      template: `
      <div class="py-16 justify-center">
        <ChecButton class="mx-auto" color="primary" tag-type="route" :to="{ name: 'test' }">
          Router link
        </ChecButton>
      </div>`,
    }}
  </Story>
</Preview>

## With icons

<Preview>
  <Story name="With icons" decorators={[withKnobs()]}>
    {{
      components: {
        ChecButton,
        CloseIcon
      },
      props: {
        color: {
          default: select('Color', ['brand', 'primary', 'secondary', 'blue', 'green', 'red', 'purple', 'orange'], 'secondary'),
        },
        variant: {
          default: select('Variant', ['regular', 'small', 'round'], 'regular'),
        },
        hasIcon: {
          default: boolean('Show Icon', true),
        },
      },
      template: `
        <div class="py-16 justify-center">
          <chec-button class="mx-auto mb-4" :color="color" :variant="variant">
            Bigger, amazing
            <template v-if="hasIcon" v-slot:icon>
              <CloseIcon />
            </template>
          </chec-button>
          <chec-button class="mx-auto" :color="color" :variant="variant" icon-position="after">
            Bigger, amazing
            <template v-if="hasIcon" v-slot:icon>
              <CloseIcon />
            </template>
          </chec-button>
        </div>`,
        methods: { action: action("clicked") }
    }}
  </Story>
</Preview>

## Icon only

<Preview>
  <Story name="Icon only" decorators={[withKnobs()]}>
    {{
      components: {
        ChecButton,
        CloseIcon
      },
      props: {
        color: {
          default: select('Color', ['brand', 'primary', 'secondary', 'blue', 'green', 'red', 'purple', 'orange'], 'brand'),
        },
      },
      template: `
        <div class="py-16 justify-center">
          <chec-button class="mx-auto mb-4" :color="color" variant="small" @click="action">
            <template v-slot:icon>
              <CloseIcon />
            </template>
          </chec-button>
        </div>`,
        methods: { action: action("clicked") }
    }}
  </Story>
</Preview>

## Slot content

<Preview>
  <Story name="Slot Content" decorators={[withKnobs({escapeHTML: false})]}>
    {{
      components: {
        ChecButton
      },
      props: {
        color: {
          default: select('Color', ['brand', 'primary', 'secondary', 'blue', 'green', 'red', 'purple', 'orange'], 'secondary'),
        },
        variant: {
          default: select('Variant', ['regular', 'small', 'round'], 'regular'),
        },
        disabled: {
          default: select('Disabled', [true, false], false),
        },
        text: {
          default: text('Slot Content', '<b>Bold text</b>'),
        },
      },
      template: `
        <div class="py-16 flex justify-center">
          <chec-button :color="color" :variant="variant" :disabled="disabled" v-html="text">
          </chec-button>
        </div>
      `,
      methods: { action: action("clicked") }
    }}
  </Story>
</Preview>