import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { action } from "@storybook/addon-actions";
import { select, boolean } from '@storybook/addon-knobs';
import ChecButton from '../../components/ChecButton.vue';
import ChecLoading from '../../components/ChecLoading.vue';
import ChecModal from '../../components/ChecModal.vue';
import TextField from '../../components/TextField.vue';
const widths = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'full', 'screen-sm', 'screen-md', 'screen-lg', 'screen-xl', 'none'];

<Meta title="Components/Modal" component={ChecModal} />

## Default

<Props of={ChecModal} />

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecModal,
        ChecButton,
      },
      props: {
        width: {
          default: select('Width', widths, '2xl'),
        },
        overlay: {
          default: select('Overlay', ['light', 'dark']),
        },
      },
      data() {
        return {
          open: true,
        };
      },
      methods: {
        dismiss() {
          this.open = false;
          return action('Modal dismissed!')();
        },
      },
      template: `
        <div>
          <ChecButton @click="open = !open" color="primary" class="m-20">
            Open modal
          </ChecButton>
          <ChecModal
            v-if="open"
            :width="width"
            :overlay="overlay"
            @dismiss="dismiss"
          >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor imperdiet pellentesque. Mauris quam enim, vehicula ac felis vel, tempus tincidunt massa.</p>
            <p>Mauris eget mi neque. Nullam eu est a velit mattis cursus vel nec purus. Pellentesque tincidunt ornare auctor.</p>
            <p>Mauris vitae lobortis justo. Donec nec nisl condimentum, efficitur tellus vel, lobortis leo. Curabitur volutpat porta sapien, eget sagittis est placerat ac. Cras commodo vehicula arcu, sed tincidunt ligula molestie ac.</p>
          </ChecModal>
          <p class="text-left m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-center m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-right m-40">I am a bunch of content that the modal will be displayed on top of.</p>
        </div>`
    }}
  </Story>
</Preview>

## With a header

<Preview>
  <Story name="Header">
    {{
      components: {
        ChecModal,
        ChecButton,
      },
      props: {
        width: {
          default: select('Width', widths, '2xl'),
        },
        overlay: {
          default: select('Overlay', ['light', 'dark']),
        },
      },
      data() {
        return {
          open: true,
        };
      },
      methods: {
        dismiss() {
          this.open = false;
          return action('Modal dismissed!')();
        },
      },
      template: `
        <div>
          <ChecButton @click="open = !open" color="primary" class="m-20">
            Open modal
          </ChecButton>
          <ChecModal
            v-if="open"
            :overlay="overlay"
            :width="width"
            header="Modal title"
            @dismiss="dismiss"
          >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor imperdiet pellentesque. Mauris quam enim, vehicula ac felis vel, tempus tincidunt massa.</p>
            <p>Mauris eget mi neque. Nullam eu est a velit mattis cursus vel nec purus. Pellentesque tincidunt ornare auctor.</p>
            <p>Mauris vitae lobortis justo. Donec nec nisl condimentum, efficitur tellus vel, lobortis leo. Curabitur volutpat porta sapien, eget sagittis est placerat ac. Cras commodo vehicula arcu, sed tincidunt ligula molestie ac.</p>
          </ChecModal>
          <p class="text-left m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-center m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-right m-40">I am a bunch of content that the modal will be displayed on top of.</p>
        </div>`
    }}
  </Story>
</Preview>


## With a form

<Props of={ChecModal} />

<Preview>
  <Story name="With a form">
    {{
      components: {
        ChecButton,
        ChecModal,
        TextField,
      },
      data() {
        return {
          showModal: true,
        };
      },
      props: {
        form: {
          default: () => boolean('Use <form> root', true),
        },
        width: {
          default: select('Width', widths, 'lg'),
        },
        overlay: {
          default: select('Overlay', ['light', 'dark']),
        },
      },
      methods: {
        dismiss() {
          this.showModal = false;
          return action('Modal dismissed!')();
        },
      },
      template: `
        <div class="font-lato">
          <ChecButton @click="showModal = !showModal" color="primary" class="m-20">
            Open modal
          </ChecButton>
          <ChecModal
            :overlay="overlay"
            :form="form"
            :width="width"
            header="Set up your account"
            v-if="showModal"
            @dismiss="dismiss"
          >
            <label class="block mb-4">
              <TextField label="First name" value="Leslie" class="w-full" />
            </label>
            <label class="block mb-4">
              <TextField label="Surname" value="Lawless" class="w-full" />
            </label>
            <label class="block mb-4">
              <TextField label="Email address" value="lezlie@example.com" class="w-full" />
            </label>
            <ChecButton color="primary" class="mt-8 p-0" @click="dismiss" text-only>Close</ChecButton>
          </ChecModal>
          <p class="text-left m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-center m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-right m-40">I am a bunch of content that the modal will be displayed on top of.</p>
        </div>`
    }}
  </Story>
</Preview>

## With action toolbar

<Props of={ChecModal} />

<Preview>
  <Story name="With action toolbar">
    {{
      components: {
        ChecButton,
        ChecModal,
        TextField,
      },
      data() {
        return {
          showModal: true,
        };
      },
      props: {
        form: {
          default: () => boolean('Use <form> root', true),
        },
        width: {
          default: select('Width', widths, 'lg'),
        },
        overlay: {
          default: select('Overlay', ['light', 'dark']),
        },
      },
      methods: {
        dismiss() {
          this.showModal = false;
        },
      },
      template: `
        <div class="font-lato">
          <ChecButton @click="showModal = !showModal" color="primary" class="m-20">
            Open modal
          </ChecButton>
          <ChecModal
            v-if="showModal"
            :overlay="overlay"
            :form="form"
            :width="width"
            header="Set up your account"
            @dismiss="dismiss"
          >
            <label class="block mb-4">
              <TextField label="First name" value="Leslie" class="w-full" />
            </label>
            <label class="block mb-4">
              <TextField label="Surname" value="Lawless" class="w-full" />
            </label>
            <label class="block mb-4">
              <TextField label="Email address" value="lezlie@example.com" class="w-full" />
            </label>
            <template v-slot:toolbar>
              <ChecButton color="primary" text-only @click="dismiss">
                Cancel
              </ChecButton>
              <ChecButton color="primary">
                Save
              </ChecButton>
            </template>
          </ChecModal>
          <p class="text-left m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-center m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-right m-40">I am a bunch of content that the modal will be displayed on top of.</p>
        </div>`
    }}
  </Story>
</Preview>

## Loading state

<Preview>
  <Story name="With loading state">
    {{
      components: {
        ChecModal,
        ChecLoading,
      },
      data() {
        return {
          showModal: true,
        };
      },
      props: {
        form: {
          default: () => boolean('Use <form> root', true),
        },
        overlay: {
          default: select('Overlay', ['light', 'dark']),
        },
        width: {
          default: select('Width', widths, 'lg'),
        },
      },
      methods: {
        hideModal() {
          this.showModal = false;
        },
      },
      template: `
        <div class="font-lato">
          <ChecModal :overlay="overlay" :form="form" :width="width" header="Set up your account">
            <ChecLoading message="Please wait..." />
          </ChecModal>
          <p class="text-left m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-center m-40">I am a bunch of content that the modal will be displayed on top of.</p>
          <p class="text-right m-40">I am a bunch of content that the modal will be displayed on top of.</p>
        </div>`
    }}
  </Story>
</Preview>