import readme from './readme.md'

export default {
  title: 'Textfield',
  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
    notes: { readme },
  },
  argTypes: {
    placeholder: {
      name: 'Placeholder',
      table: { category: 'Props' },
      defaultValue: 'Default placeholder',
      control: { type: 'text' }
    },
    label: {
      name: 'Label',
      table: { category: 'Props' },
      defaultValue: 'Label',
      control: { type: 'text' }
    },
    type: {
      name: 'Type',
      table: { category: 'Props' },
      defaultValue: 'text',
      control: { type: 'select', options: ['text', 'password', 'dni', 'document', 'email', 'number', 'expiration', 'cvv', 'phone', 'date'] }
    },
    trailingIcon: {
      name: 'Trailing icon',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    leadingIcon: {
      name: 'Leading icon',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    required: {
      name: 'Required',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    requiredMessage: {
      name: 'Required message',
      table: { category: 'Props' },
      defaultValue: 'Este campo es requerido',
      control: { type: 'text' }
    },
    error: {
      name: 'Error',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    errorMessage: {
      name: 'Error message',
      table: { category: 'Props' },
      defaultValue: 'Por favor, ingrese este campo correctamente',
      control: { type: 'text' }
    },
    value: {
      name: 'Value',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    subtitle: {
      name: 'Subtitle',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    width: {
      name: 'Width',
      table: { category: 'Props' },
      control: { type: 'number' }
    },
    disabled: {
      name: 'Disabled',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    maxLength: {
      name: 'Max length',
      table: { category: 'Props' },
      control: { type: 'number' }
    },
    labelGroup: {
      name: 'Label',
      table: { category: 'Props (Group)' },
      control: { type: 'text' }
    },
    subtitleGroup: {
      name: 'Subtitle',
      table: { category: 'Props (Group)' },
      control: { type: 'text' }
    },
    requiredGroup: {
      name: 'Required',
      table: { category: 'Props (Group)' },
      control: { type: 'boolean' }
    },
    errorGroup: {
      name: 'Error',
      table: { category: 'Props (Group)' },
      control: { type: 'boolean' }
    },
    onchange: {
      table: { category: 'Methods' }
    },
  }
}

export const box = (args) => (`
  <ibk-textfield type="${args.type}"
    placeholder="${args.placeholder}"
    label="${args.label}"
    trailing-icon="${args.trailingIcon ?? ''}"
    leading-icon="${args.leadingIcon ?? ''}"
    required="${args.required ?? false}"
    required-msg="${args.requiredMessage}"
    error="${args.error ?? false}"
    error-msg="${args.errorMessage}"
    value="${args.value ?? ''}"
    subtitle="${args.subtitle ?? ''}"
    width="${args.width}"
    disabled="${args.disabled ?? false}"
    max-length=${args.maxLength ?? 100000} ></ibk-textfield>
`)

export const group = (args) => (`
  <ibk-textfield-group label="${args.labelGroup ?? ''}"
    subtitle="${args.subtitleGroup ?? ''}"
    required="${args.requiredGroup ?? false}"
    error="${args.errorGroup ?? false}" >
    <ibk-textfield placeholder="CVV" type="cvv"></ibk-textfield>
    <ibk-textfield placeholder="MM/YY" type="expiration"></ibk-textfield>
  </ibk-textfield-group>
`)