import React from 'react'
import { Story, Meta } from '@storybook/react'
import { Select, SelectProps } from './Select'
import { Form } from '../Form/Form'

export default {
  title: 'Forms/Select',
  component: Select,
  argTypes: {
    value: {
      name: 'value',
      description: 'Initial value for the input',
      type: { name: 'string', required: false },
      control: { type: 'string' }
    },
    label: {
      name: 'label',
      description: 'Label for the input ',
      type: { name: 'string', required: true },
      control: { type: 'string' }
    },
    placeholder: {
      name: 'placeholder',
      description: 'Hint text to display',
      type: { name: 'string', required: false },
      control: { type: 'string' }
    },
    helpText: {
      name: 'helpText',
      description: 'Additional hint text to display',
      type: { name: 'string', required: false },
      control: { type: 'string' }
    },
    name: {
      name: 'name',
      description: 'Name of the input',
      type: { name: 'string', required: false }
    },
    disabled: {
      name: 'disabled',
      description: 'Disable the input',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    }
  }
} as Meta

const Template: Story<SelectProps> = (args: any) => {
  return (
    <Form
      onSubmit={(values) => {
        console.log(values)
      }}
    >
      <Select {...args}></Select>
    </Form>
  )
}

const countries = [
  {
    code: 'mx',
    name: 'México',
    flag: '🇲🇽'
  },
  {
    code: 'co',
    name: 'Colombia',
    flag: '🇨🇴'
  },
  {
    code: 'br',
    name: 'Brasil',
    flag: '🇧🇷'
  },
  {
    code: 'pe',
    name: 'Peru',
    flag: '🇵🇪'
  },
  {
    code: 'ar',
    name: 'Argentina',
    flag: '🇦🇷'
  },
  {
    code: 'cl',
    name: 'Chile',
    flag: '🇨🇱'
  },
  {
    code: 'pa',
    name: 'Panama',
    flag: '🇵🇦'
  },
  {
    code: 'cr',
    name: 'Costa Rica',
    flag: '🇨🇷'
  },
  {
    code: 'ec',
    name: 'Ecuador',
    flag: '🇪🇨'
  },
  {
    code: 'uy',
    name: 'Uruguay',
    flag: '🇺🇾'
  }
]

export const DefaultSelect = Template.bind({})
DefaultSelect.args = {
  label: 'Country',
  name: 'country',
  value: countries[0],
  options: countries,
  optionText: 'name',
  prefixText: 'flag'
}

export const WithHelpText = Template.bind({})
WithHelpText.args = {
  label: 'Country',
  name: 'country',
  value: countries[0],
  helpText: "We'll only use this for spam.",
  options: countries,
  optionText: 'name',
  prefixText: 'flag'
}

export const WithValidationError = Template.bind({})
WithValidationError.args = {
  label: 'Country',
  name: 'country',
  value: countries[0],
  validate: (v) => v.length <= 3 && 'Please select one',
  options: countries,
  optionText: 'name',
  prefixText: 'flag'
}

export const Disabled = Template.bind({})
Disabled.args = {
  label: 'Country',
  name: 'country',
  value: countries[0],
  disabled: true,
  options: countries,
  optionText: 'name',
  prefixText: 'flag'
}
