import Dropdown from './readme.md'
import DropdownItem from '../dropdown-item/readme.md'

export default {
  title: 'Dropdown',
  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
    notes: { Dropdown, DropdownItem },
  },
  argTypes: {
    code: {
      name: 'Code',
      table: { category: 'Props (item)' },
      defaultValue: 'BRA',
      control: { type: 'text' }
    },
    label: {
      name: 'Label',
      table: { category: 'Props (item)' },
      defaultValue: 'Brasil',
      control: { type: 'text' }
    },
    disabled: {
      name: 'Disabled',
      table: { category: 'Props (item)' },
      control: { type: 'boolean' }
    },
    color: {
      name: 'Color',
      table: { category: 'Props (item)' },
      control: { type: 'color' }
    },
    selected: {
      name: 'Selected',
      table: { category: 'Props (item)' },
      control: { type: 'boolean' }
    },
    preselected: {
      name: 'Preselected',
      table: { category: 'Props (item)' },
      control: { type: 'boolean' }
    },
    hide: {
      name: 'Hide',
      table: { category: 'Props (item)' },
      control: { type: 'boolean' }
    },
    labelGroup: {
      name: 'Label',
      table: { category: 'Props (group)' },
      control: { type: 'text' }
    },
    subtitleGroup: {
      name: 'Subtitle',
      table: { category: 'Props (group)' },
      control: { type: 'text' }
    },
    placeholderGroup: {
      name: 'Placeholder',
      table: { category: 'Props (group)' },
      control: { type: 'text' }
    },
    errorGroup: {
      name: 'Error',
      table: { category: 'Props (group)' },
      control: { type: 'boolean' }
    },
    requiredGroup: {
      name: 'Required',
      table: { category: 'Props (group)' },
      control: { type: 'boolean' }
    },
    requiredMessageGroup: {
      name: 'Required message',
      table: { category: 'Props (group)' },
      defaultValue: 'Por favor, seleccione una opción',
      control: { type: 'text' }
    },
    searcherGroup: {
      name: 'Searcher',
      table: { category: 'Props (group)' },
      control: { type: 'boolean' }
    },
    searcherPlaceholderGroup: {
      name: 'Searcher placeholder',
      table: { category: 'Props (group)' },
      control: { type: 'text' }
    },
    disabledGroup: {
      name: 'Disabled',
      table: { category: 'Props (group)' },
      control: { type: 'boolean' }
    }
  }
}

export const normal = (args) => (`
  <ibk-dropdown
    label="${args.labelGroup ?? 'Label default'}"
    subtitle="${args.subtitleGroup ?? ''}"
    placeholder="${args.placeholderGroup ?? 'Seleccione'}"
    error="${args.errorGroup ?? false}"
    required="${args.requiredGroup ?? false}"
    required-message="${args.requiredMessageGroup}"
    searcher="${args.searcherGroup ?? false}"
    searcher-placeholder="${args.searcherPlaceholderGroup ?? 'Buscar'}"
    disabled="${args.disabledGroup ?? false}" >

    <ibk-dropdown-item
      code="${args.code}"
      label="${args.label}"
      disabled="${args.disabled ?? false}"
      color="${args.color}"
      selected="${args.selected ?? false}"
      preselected="${args.preselected ?? false}"
      hide="${args.hide ?? false}" ></ibk-dropdown-item>
      
    <ibk-dropdown-item code="ARG" label="Argentina"></ibk-dropdown-item>
    <ibk-dropdown-item code="URU" label="Uruguay"></ibk-dropdown-item>
    <ibk-dropdown-item code="COL" label="Colombia"></ibk-dropdown-item>
    <ibk-dropdown-item code="PER" label="Per&uacute;"></ibk-dropdown-item>
    <ibk-dropdown-item code="CHI" label="Chile"></ibk-dropdown-item>
    <ibk-dropdown-item code="PAR" label="Paraguay"></ibk-dropdown-item>
    <ibk-dropdown-item code="ECU" label="Ecuador"></ibk-dropdown-item>
    <ibk-dropdown-item code="VEN" label="Venezuela"></ibk-dropdown-item>
    <ibk-dropdown-item code="BOL" label="Bolivia"></ibk-dropdown-item>

    </ibk-dropdown>

  <p style="
    color: #808080;
    font-family: Montserrat;
    font-size: 12px;
    border-bottom:1px solid #cccs;
    position: absolute;
    bottom: 0;">* Los controles para el "ibk-dropdown-item" se aplicar&aacute;n solo al primer item</p>
`)