import React, { useState } from 'react'
import MultiSelectInput from '../components/MultiSelectInput'

export default {
  title: 'Form/MultiSelectInput',
  component: MultiSelectInput,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    className: {
      description: 'Adicione uma classe.',
    },
    label: {
      description: 'Adicione uma label.',
    },
    onChange: {
      description: 'Função para capturar o valor quando alterado.',
    },
    placeholder: {
      description: 'Adicione um placeholder.',
    },
    options: {
      description: 'Lista de valores a ser exibido.',
    },
    value: {
      description: 'Valor selecionado.',
    },
    isSearchable: {
      description: 'Habilita a função de buscar um valor.',
    },
    isClearable: {
      description: 'Habilita a função de limpar o item selecionado.',
    },
    disabled: {
      description: 'Habilita ou desabilita.',
    },
  },
}

export const Default = (args) => {
  const options = [
    {
      label: 'options 1',
      value: 'value 1',
    },
    {
      label: 'options 2',
      value: 'value 2',
    },
    {
      label: 'options 3',
      value: 'value 3',
    },
    {
      label: 'options 4',
      value: 'value 4',
    },
    {
      label: 'options 5',
      value: 'value 5',
    },
    {
      label: 'options 6',
      value: 'value 6',
    },
  ]
  const [selectedValue, setSelectedValue] = useState<any>(options[0])
  return (
    <div
      style={{
        width: 300,
      }}
    >
      <MultiSelectInput
        options={options}
        value={selectedValue}
        onChange={(value) => setSelectedValue(value)}
        {...args}
      />
    </div>
  )
}

Default.args = {
  className: '',
  label: 'Selecione:',
  placeholder: 'Selecione uma opção',
  disabled: false,
  isSearchable: false,
  isClearable: false,
}