import readme from './readme.md'

export default {
  title: 'Calendar',
  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
    notes: { readme },
  },
  argTypes: {
    label: {
      name: 'Label',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    subtitle: {
      name: 'Subtitle',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    placeholder: {
      name: 'Placeholder',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    months: {
      name: 'Months',
      table: { category: 'Props' },
      defaultValue: '1',
      control: { type: 'select', options: ['1', '2'] }
    },
    showMonth: {
      name: 'Show month',
      table: { category: 'Props' },
      defaultValue: 'next',
      control: { type: 'select', options: ['next', 'prev'] }
    },
    multiselect: {
      name: 'Multiselect',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    openTo: {
      name: 'Open to',
      table: { category: 'Props' },
      defaultValue: 'bottom-right',
      control: { type: 'select', options: ['bottom-right', 'bottom-left', 'top-right', 'top-left'] }
    },
    initialDate: {
      name: 'Initial date',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    endDate: {
      name: 'End date',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    selectedDate: {
      name: 'Selected Date',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    selectedDates: {
      name: 'Selected Dates',
      table: { category: 'Props' },
      control: { type: 'text' }
    },
    rangeSelector: {
      name: 'Range selector',
      table: { category: 'Props' },
      defaultValue: 'none',
      control: { type: 'select', options: ['none', 'day', 'week', 'month'] }
    },
    full: {
      name: 'Full',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    error: {
      name: 'Error',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    required: {
      name: 'Required',
      table: { category: 'Props' },
      control: { type: 'boolean' }
    },
    requiredMessage: {
      name: 'Required message',
      table: { category: 'Props' },
      defaultValue: 'Por favor, selecciona una fecha',
      control: { type: 'text' }
    },
  }
}

export const calendar = (args) => (`
  <ibk-calendar label="${args.label ?? ''}"
    subtitle="${args.subtitle ?? ''}"
    placeholder="${args.placeholder ?? !args.multiselect ? 'dd/mm/aaaa' : 'dd/mm/aaaa - dd/mm/aaaa'}"
    months="${args.months}"
    multiselect="${args.multiselect ?? false}"
    show-month="${args.showMonth}"
    open-to="${args.openTo}"
    initial-date="${args.initialDate}"
    end-date="${args.endDate}"
    selected-date="${args.selectedDate ?? ''}"
    selected-dates="${args.selectedDates ?? ''}"
    full="${args.full ?? false}"
    range-selector=${args.rangeSelector}
    error="${args.error ?? false}"
    required="${args.required ?? false}"
    required-message="${args.requiredMessage}" >
  </ibk-calendar>
`)