import React from 'react'

import type { Meta, StoryObj } from '@storybook/react'
import { Select } from '../components'
import { DataSelect, TextFieldSizeVariant } from '../types'
import { SelectChangeEvent } from '@mui/material'

const sizes: TextFieldSizeVariant[] = ['small', 'medium']

const data: DataSelect[] = [
  { label: 'Oliver Hansen', value: 'oliver-hansen' },
  { label: 'Van Henry', value: 'van-henry' },
  { label: 'April Tucker', value: 'april-tucker' },
  { label: 'Ralph Hubbard', value: 'ralph-hubbard' },
  { label: 'Omar Alexander', value: 'omar-alexander' },
  { label: 'Carlos Abbott', value: 'carlos-abbott' },
  { label: 'Miriam Wagner', value: 'miriam-wagner' },
  { label: 'Bradley Wilkerson', value: 'bradley-wilkerson' },
  { label: 'Virginia Andrews', value: 'virginia-andrews' },
  { label: 'Kelly Snyder', value: 'kelly-snyder' },
]

const meta = {
  title: 'Form/Select',
  component: Select,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof Select>

export default meta

type Story = StoryObj<typeof meta>

export const SelectBasic = () => {
  const [value, setValue] = React.useState('')

  const handleChange = (event: SelectChangeEvent) => {
    setValue(event.target.value as string)
  }
  return (
    <div style={{ width: '480px', marginBottom: 30 }}>
      <Select
        id="select-demo"
        value={value}
        onChange={handleChange}
        label="Members"
        variant="standard"
        data={data}
      />
    </div>
  )
}

SelectBasic.storyName = 'Select Basic'

export const SelectVariants = () => {
  const [value, setValue] = React.useState('')

  const handleChange = (event: SelectChangeEvent) => {
    setValue(event.target.value as string)
  }
  return (
    <>
      <div style={{ width: '480px', marginBottom: 30 }}>
        <Select
          id="select-demo"
          value={value}
          onChange={handleChange}
          label="Members"
          variant="standard"
          data={data}
        />
      </div>
      <div style={{ width: '480px', marginBottom: 30 }}>
        <Select
          id="select-demo"
          value={value}
          onChange={handleChange}
          label="Members"
          variant="filled"
          data={data}
        />
      </div>
      <div style={{ width: '480px', marginBottom: 30 }}>
        <Select
          id="select-demo"
          value={value}
          onChange={handleChange}
          label="Members"
          variant="outlined"
          data={data}
        />
      </div>
    </>
  )
}

SelectVariants.storyName = 'Select Variantes'

export const SelectMultiple = () => {
  const [value, setValue] = React.useState<string[]>([])

  const handleChange = (event: SelectChangeEvent<typeof value>) => {
    const {
      target: { value },
    } = event
    setValue(typeof value === 'string' ? value.split(',') : value)
  }

  return (
    <div style={{ width: '480px', marginBottom: 30 }}>
      <Select
        id="select-demo"
        value={value}
        onChange={handleChange}
        label="Members"
        multiple={true}
        data={data}
        variant="standard"
      />
    </div>
  )
}

SelectMultiple.storyName = 'Select Multiples'