text: import { action } from '@storybook/addon-actions';
  import BaseForm from './BaseForm.vue';
  import BlockCheckGroup from '../BlockCheckGroup';
  import InputMasks from '../../constants/InputMasks';
  
  export default {
    title: 'BaseForm',
    component: BaseForm,
  };
  
  export const LogInForm = () => ({
    components: { BaseForm },
    data() {
      return {
        fields: [
          {
            name: 'email',
            type: 'email',
            label: 'Email',
          },
          {
            name: 'password',
            type: 'password',
            label: 'Password',
          },
          {
            name: 'remember',
            type: 'checkbox',
            label: 'Remember me',
          },
          {
            type: 'submit',
            label: 'Log In',
          },
        ],
        initialValues: {
          email: 'test@bambee.com',
        },
        errors: {},
      };
    },
    methods: {
      handleInput(e) {
        this.errors = {};
        action('input')(e);
      },
      handleSubmit(e) {
        const errors = {};
        if (!e.email) {
          errors.email = 'This field is required';
        }
        if (!e.password) {
          errors.password = 'This field is required';
        }
        this.errors = errors;
        action('submit')(e);
      },
    },
    template: `
      <BaseForm 
        class="max-w-full w-96 mx-auto mt-8 p-12 shadow-6 rounded"
        :fields="fields"
        :initialValues="initialValues"
        :errors="errors"
        @input="handleInput"
        @submit="handleSubmit"
      >
        <template #header>
          <div class="font-bold font-display-giga text-center">Log in</div>
          <p class="font-body-caption text-center">Welcome back to Bambee!</p>
        </template>
        <template #footer>
          <p text-center>This example uses some inline validation on the submit event.</p>
        </template>
      </BaseForm>
    `,
  });
  
  export const RegistrationForm = () => ({
    components: { BaseForm, BlockCheckGroup },
    data() {
      return {
        fields: [
          {
            name: 'fname',
            label: 'First Name',
            required: true,
          },
          {
            name: 'lname',
            label: 'Last Name',
            required: true,
          },
          {
            name: 'email',
            type: 'email',
            label: 'Email',
            placeholder: 'your@example.com',
            required: true,
          },
          {
            name: 'password',
            type: 'password',
            label: 'Password',
            placeholder: 'Pick a password',
            required: true,
          },
          {
            name: 'tel',
            type: 'tel',
            label: 'Phone number',
            mask: InputMasks.PHONE,
            required: true,
            class: 'col-span-full',
          },
          {
            name: 'referrer',
            component: BlockCheckGroup,
            options: ['TV', 'Radio', 'Web search'],
            label: 'How did you hear about us?',
            class: 'col-span-full',
            vertical: true,
          },
          {
            name: 'numOfEmployees',
            type: 'select',
            label: 'Number of employees',
            options: ['1 - 4', '5 - 19', '20 - 49', '50 - 99'],
            class: 'col-span-full',
          },
          {
            type: 'submit',
            label: 'Sign up',
            class: 'col-span-full',
            size: 'large',
          },
        ],
      };
    },
    methods: {
      handleInput: action('input'),
      handleSubmit: action('submit'),
    },
    template: `
      <BaseForm 
        class="max-w-full w-96 mx-auto mt-8 p-12 shadow-6 rounded grid-cols-2"
        :fields="fields"
        @input="handleInput"
        @submit="handleSubmit"
      >
        <template #header>
          <div class="font-bold font-display-giga text-center">Register</div>
        </template>
        <template #footer>
          <p text-center>This example relies on HTML validation attributes. Additionally, it takes advantage of the "component" option for the "How did you hear about us" field to pass in a custom component.</p>
        </template>
      </BaseForm>
    `,
  });
  