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

<Meta title="Form fields/Checkbox" component={ ChecCheckbox } />

# Checkbox

#### Checkboxes allow the user to select multiple options from a checkbox group.
- Use checkboxes when the user needs to see all available options
- Users can select as many options, all the options, or none
- Use radio button component when only one selection of a group is allowed

<Props of={ ChecCheckbox } />

<Preview>
  <Story name="Checkbox">
    {{
      components: {
        ChecCheckbox
      },
      props: {
        label: {
          default: text("Label", "Apple", "Props")
        },
        disabled: {
          default: boolean("Disable", false, "Props")
        },
        required: {
          default: boolean("Required", false, "Props")
        },
        error: {
          default: boolean("Errored", false, "Props")
        },
      },
      data() {
        return { values: {
          apple: true,
          orange: false,
          pear: false,
          disabled: false,
          indeterminate: false
        } };
      },
      template: `
        <div class="py-16 flex justify-center bg-gray-100 font-lato">
          <ChecCheckbox
            class="p-3"
            name="apple"
            :label="label"
            value="apple"
            :checked="values.apple"
            :required="required"
            :error="error"
            @input="values.apple = !values.apple"
            :disabled="disabled"
          />
          <ChecCheckbox
            class="p-3"
            name="orange"
            label="Orange"
            value="orange"
            v-model="values.orange"
            :disabled="disabled"
          />
          <ChecCheckbox
            class="p-3"
            name="pear"
            label="Pear"
            value="pear"
            v-model="values.pear"
            :disabled="disabled"
          />
          <ChecCheckbox
            class="p-3"
            name="disabled"
            label="Disabled"
            value="disabled"
            v-model="values.disabled"
            disabled="disabled"
          />
          <ChecCheckbox
            class="p-3"
            name="indeterminate"
            label="Indeterminate"
            value="indeterminate"
            :disabled="disabled"
            v-model="values.indeterminate"
            indeterminate
          />
        </div>`,
    }}
  </Story>
</Preview>