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

<Meta title="Components/Tabs" component={ChecTab} />

# Tab

<Props of={ChecTab} />

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecTab,
      },
      props: {
        disabled: {
          default: boolean('Disable tab', false),
        },
        active: {
          default: boolean('Set as active', false),
        },
        label: {
          default: text('Tab label', 'Tab label'),
        },
        round: {
          default: boolean('Round', false),
        },
        dark: {
          default: boolean('Dark', false)
        }
      },
      computed: {
        background() {
          if (this.dark) {
            return 'bg-gray-600';
          }
          return `bg-gray-${this.round ? '500' : '100'}`;
        }
      },
      methods: {
        click(tab) {
          action(`Clicked tab "${tab}"`)();
        },
      },
      template: `
        <div class="mt-4 flex justify-center font-lato mx-auto max-w-lg py-6" :class="background">
          <ChecTab
            :disabled="disabled"
            :active="active"
            :round="round"
            :color="dark ? 'dark' : 'light'"
            @click="click('Tab clicked')"
          >
            {{ label }}
          </ChecTab>
        </div>`
    }}
  </Story>
</Preview>

<Preview>
  <Story name="Group">
    {{
      components: {
        ChecTab,
      },
      props: {
        round: {
          default: boolean('Round', false),
        },
        dark: {
          default: boolean('Dark', false),
        },
      },
      computed: {
        background() {
          return `bg-gray-${this.dark ? '600' : '100'}`;
        },
        wrapperClasses() {
          if (!this.round) {
            return '';
          }
          return `bg-${this.dark ? 'gray-700': 'white'} rounded-full p-1`;
        }
      },
      data() {
        return { active: 2 }
      },
      template: `
        <div class="flex justify-center font-lato mx-auto p-16" :class="background">
          <div :class="wrapperClasses">
            <ChecTab
              @click="active = 1"
              :round="round"
              :active="active === 1"
              :color="dark ? 'dark' : 'light'"
            >
              Tab one
            </ChecTab><ChecTab
              @click="active = 2"
              :round="round"
              :active="active === 2"
              :color="dark ? 'dark' : 'light'"
            >
              Tab two
            </ChecTab><ChecTab
              @click="active = 3"
              :round="round"
              disabled
              :active="active === 3"
              :color="dark ? 'dark' : 'light'"
            >
              Tab three
            </ChecTab><ChecTab
              @click="active = 4"
              :round="round"
              :active="active === 4"
              :color="dark ? 'dark' : 'light'"
            >
              Tab four
            </ChecTab>
          </div>
        </div>`
    }}
  </Story>
</Preview>