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

<Meta title="Components/Toast " component={ChecToast} />

# Notification

<Props of={ChecToast} />

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecToast
      },
      data() {
        return {
          closed: false,
        };
      },
      methods: {
        close() {
          setTimeout(() => this.closed = false, 3000);
          this.closed = true;
          return action('Notification closed!')();
        }
      },
      props: {
        variant: {
          default: select('Variant', ['success', 'error', 'warning', 'info']),
        },
        text: {
          default: text('Text to Notification', 'An alert!'),
        },
      },
      template: `
        <div class="w-1/2 mx-auto pt-6 font-lato">
          <ChecToast
            v-if="!closed"
            :variant="variant"
            @close="close()"
            persist
          >
            {{text}}
          </ChecToast>
        </div>`
    }}
  </Story>
</Preview>

# Variants

<Preview>
  <Story name="Variants">
    {{
      components: {
        ChecToast
      },
      data() {
        return {
          variants: ['success', 'error', 'warning', 'info'],
          closed: [],
        };
      },
      methods: {
        close(variant) {
          if (!this.isClosed(variant)) {
            this.closed.push(variant);
            setTimeout(() => {
              this.closed.splice(this.closed.indexOf(variant), 1);
            }, 3000)
          }
        },
        isClosed(variant) {
          return this.closed.includes(variant);
        },
        content(variant) {
          return `${variant.substring(0, 1).toUpperCase()}${variant.substring(1)} variant`;
        }
      },
      template: `
        <div class="w-1/2 mx-auto pt-6 font-lato">
          <ChecToast
            v-for="variant in variants"
            v-if="!isClosed(variant)"
            class="mb-2"
            :variant="variant"
            @close="close(variant)"
            persist
          >
            {{content(variant)}}
          </ChecToast>
        </div>`
    }}
  </Story>
</Preview>

# Format alert text using a default slot:

<Preview>
  <Story name="Formatted alert text">
    {{
      components: {
        ChecToast
      },
      data() {
        return {
          closed: false,
        };
      },
      methods: {
        close() {
          setTimeout(() => this.closed = false, 3000);
          this.closed = true;
          return action('Notification closed!')();
        }
      },
      props: {
        variant: {
          default: select('Variant', ['success', 'error', 'warning', 'info']),
        },
      },
      template: `
        <div class="w-1/2 mx-auto pt-6 font-lato">
          <ChecToast
            v-if="!closed"
            :variant="variant"
            @close="close()"
            persist
          >
            <p class="font-bold text-red-200 text-xs italic">
              Formatted alert text.
            </p>
          </ChecToast>
        </div>`
    }}
  </Story>
</Preview>

# Automatically hide on a timer

<Preview>
  <Story name="Hide on timer">
    {{
      components: {
        ChecToast
      },
      data() {
        return {
          closed: false,
        };
      },
      methods: {
        close() {
          setTimeout(() => this.closed = false, 3000);
          this.closed = true;
          return action('Notification timer expired and was it was hidden')();
        }
      },
      props: {
        variant: {
          default: select('Variant', ['success', 'error', 'warning', 'info']),
        },
      },
      template: `
        <div class="w-1/2 mx-auto font-lato">
          <ChecToast
            v-if="!closed"
            :variant="variant"
            @close="close()"
            :hideTime="3000"
          >
            I will disappear after 3 seconds
          </ChecToast>
        </div>`
    }}
  </Story>
</Preview>


# Notification With Button

<Props of={ChecToast} />

<Preview>
  <Story name="With Button">
    {{
      components: {
      ChecButton,
        ChecToast
      },
      data() {
        return {
          closed: false,
        };
      },
      methods: {
        close() {
          setTimeout(() => this.closed = false, 3000);
          this.closed = true;
          return action('Notification closed!')();
        }
      },
      props: {
        variant: {
          default: select('Variant', ['success', 'error', 'warning', 'info']),
        },
        text: {
          default: text('Text to Notification', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'),
        },
        ButtonText: {
          default: text('Button Text' , 'Read More'),
        },
      },
      template: `
        <div class="w-1/4 mx-auto pt-6 font-lato">
          <ChecToast
            v-if="!closed"
            :variant="variant"
            @close="close()"
            persist
          >
            {{text}}
            <ChecButton
              variant="round"
              v-html="ButtonText"
            />
          </ChecToast>
        </div>`
    }}
  </Story>
</Preview>