import React from 'react'
import { Meta } from '@storybook/react/types-6-0'
import { Story } from '@storybook/react'
import { Dropdown,DropdownProps } from './Dropdown'
import { useArgs } from '@storybook/client-api'

export default {
  title:'Components/Dropdown',
  component: Dropdown,
  argTypes: {}
} as Meta

const data = [
  {
    name: 'Alberta',
    abbreviation: 'AB'
  },
  {
    name: 'British Columbia',
    abbreviation: 'BC'
  },
  {
    name: 'Manitoba',
    abbreviation: 'MB'
  },
  {
    name: 'New Brunswick',
    abbreviation: 'NB'
  },
  {
    name: 'Newfoundland and Labrador',
    abbreviation: 'NL'
  },
  {
    name: 'Nova Scotia',
    abbreviation: 'NS'
  },
]

const Template: Story<DropdownProps> = (args) => {
  const [{ value },updateArgs] = useArgs()
  
  const handleChange = (value: string | number ) => {
    updateArgs({ value })
  } 
  return (
    <Dropdown 
      {...args}
      value={value}
      onChange={handleChange}
    />
  )
}

export const Basic = Template.bind({})
Basic.args = { label:'Location',  name:'select', options:[{ label: 'Unknown location',value: '' },...data.map(c => ({ label: c.name,value: c.abbreviation }))] }

export const Placeholder = Template.bind({})
Placeholder.args = { label:'Location',  name:'select',  options:[...data.map(c => ({ label: c.name,value: c.abbreviation }))],placeholder:'Select your option' }


