import Checkbox from './readme.md';
import CheckboxGroup from '../checkbox-group/readme.md'

export default {
  title: 'Checkbox',
  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
    notes: { Checkbox, CheckboxGroup },
  },
  argTypes: {
    subtitle: {
      name: 'Subtitle',
      table: { category: 'Props (grouped)' },
      control: { type: 'text' }
    },
    errorGroup: {
      name: 'Error',
      table: { category: 'Props (grouped)' },
      control: { type: 'boolean' }
    },
    requiredGroup: {
      name: 'Required',
      table: { category: 'Props (grouped)' },
      control: { type: 'boolean' }
    },
    requiredMessageGroup: {
      name: 'Required message',
      table: { category: 'Props (grouped)' },
      defaultValue: 'Selecciona una opción',
      control: { type: 'text' }
    },
    value: {
      name: 'Value',
      table: { category: 'Props (unique)' },
      defaultValue: '1',
      control: { type: 'text' }
    },
    label: {
      name: 'Label',
      table: { category: 'Props (unique)' },
      defaultValue: 'Default label',
      control: { type: 'text' }
    },
    checked: {
      name: 'Checked',
      table: { category: 'Props (unique)' },
      control: { type: 'boolean' }
    },
    disabled: {
      name: 'Disabled',
      table: { category: 'Props (unique)' },
      control: { type: 'boolean' }
    },
    required: {
      name: 'Required',
      table: { category: 'Props (unique)' },
      control: { type: 'boolean' }
    },
    requiredMessage: {
      name: 'Required message',
      table: { category: 'Props (unique)' },
      defaultValue: 'Este campo es requerido',
      control: { type: 'text' }
    },
    error: {
      name: 'Error',
      table: { category: 'Props (unique)' },
      control: { type: 'boolean' }
    },
    full: {
      name: 'Full',
      table: { category: 'Props (unique)' },
      control: { type: 'boolean' }
    },
    iconPosition: {
      name: 'Icon position',
      table: { category: 'Props (unique)' },
      defaultValue: 'left',
      control: { type: 'select', options: ['left', 'right'] }
    },
    outline: {
      name: 'Outline',
      table: { category: 'Props (unique)' },
      control: { type: 'boolean' }
    },
    onchecked: {
      table: { category: 'Methods (unique)' }
    }
  }
}

export const unique = (args) => (`
  <ibk-checkbox
    value="${args.value}"
    label="${args.label}"
    checked="${args.checked ?? false}"
    disabled="${args.disabled ?? false}"
    required="${args.required ?? false}"
    required-message="${args.requiredMessage}"
    error="${args.error ?? false}"
    full="${args.full ?? false}"
    icon-position="${args.iconPosition}"
    outline="${args.outline ?? false}"></ibk-checkbox>
`)

export const grouped = (args) => (`
  <ibk-checkbox-group
    subtitle="${args.subtitle ?? ''}"
    error="${args.errorGroup ?? false}"
    required="${args.requiredGroup ?? false}"
    required-message="${args.requiredMessageGroup}">

    <ibk-checkbox value="1" label="Opci&oacute;n 1"></ibk-checkbox>
    <ibk-checkbox value="2" label="Opci&oacute;n 2"></ibk-checkbox>
    <ibk-checkbox value="3" label="Opci&oacute;n 3"></ibk-checkbox>

  </ibk-checkbox-group>
`)