import { useState } from 'react'
import { MultiSelectInput } from './index.js'

export const String = () => {
  const [value, setValue] = useState<string[]>([])
  return (
    <MultiSelectInput
      values={value}
      onChange={(value) => {
        setValue(value as string[])
      }}
      options={[
        { label: 'Automatic', value: 'auto' },
        { label: 'Manual', value: 'manual' },
      ]}
      placeholder="Placeholder"
    />
  )
}
export const Number = () => {
  const [value, setValue] = useState<number[]>([])
  return (
    <MultiSelectInput
      values={value}
      onChange={(value) => {
        setValue(value as number[])
      }}
      options={[
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3 },
        { label: '4', value: 4 },
      ]}
      placeholder="Placeholder"
    />
  )
}

export const Boolean = () => {
  const [value, setValue] = useState<boolean[]>([])
  return (
    <MultiSelectInput
      values={value}
      onChange={(value) => {
        setValue(value as boolean[])
      }}
      options={[
        { label: 'True', value: true },
        { label: 'False', value: false },
      ]}
      placeholder="Placeholder"
    />
  )
}

export const Filterable = () => {
  const [value, setValue] = useState<string[]>([])
  return (
    <MultiSelectInput
      values={value}
      onChange={(value) => {
        setValue(value as string[])
      }}
      leadIcon="sort"
      options={[
        { label: 'Francesco', value: '1' },
        { label: 'Bence', value: '2' },
        { label: 'Kyle', value: '3' },
        { label: 'Yves', value: '4' },
        { label: 'Youri', value: '5' },
      ]}
      placeholder="Placeholder"
      filterable
    />
  )
}

export const Error = () => {
  const [value, setValue] = useState<string[]>()
  return (
    <MultiSelectInput
      error
      values={value}
      onChange={(value) => {
        setValue(value as string[])
      }}
      options={[
        { label: 'Automatic', value: 'auto' },
        { label: 'Manual', value: 'manual' },
      ]}
      placeholder="Placeholder"
    />
  )
}

export const Disabled = () => {
  const [value, setValue] = useState<string[]>()
  return (
    <MultiSelectInput
      values={value}
      onChange={(value) => {
        setValue(value as string[])
      }}
      disabled
      options={[
        { label: 'Automatic', value: 'auto' },
        { label: 'Manual', value: 'manual' },
      ]}
      placeholder="Placeholder"
    />
  )
}
