import { Meta, StoryObj } from '@storybook/react'
import Select from './Select.component'
import { ISelect } from './Select.interface'
import React, { useState } from 'react'
export default {
  title: 'Backlog/Select',
  component: Select,
  argTypes: {
    theme: {
      options: ['dark', 'light'],
      control: { type: 'radio' }
    }
  }
} as Meta

const options = [
  { label: 'Asc', value: 'Asc' },
  { label: 'Desc', value: 'Desc' },
  { label: 'Name', value: 'Name' },
  { label: 'Test', value: 'Test' }
]

export const Dark: StoryObj<Partial<ISelect>> = args => {
  const [selected, setSelected] = useState('Sort by')

  const handleOnChange = event => {
    console.log(event.target.value)
    setSelected(event.target.value)
  }

  return (
    <Select
      options={options}
      value={selected}
      onChange={handleOnChange}
    ></Select>
  )
}
export const Light: StoryObj<Partial<ISelect>> = args => {
  const [selected, setSelected] = useState('Sort by')

  const handleOnChange = event => {
    console.log(event.target.value)
    setSelected(event.target.value)
  }

  return (
    <Select
      options={options}
      value={selected}
      onChange={handleOnChange}
    ></Select>
  )
}