import React, { useState } from 'react';
import MultiSelect from '.';
import { Stack } from '../Layout';
import Button from '../Button';

export default {
  title: 'Components|MultiSelect',
  component: MultiSelect,
};

const Wrapper = () => {
  const original = [
    { id: 1, label: 'Invoice 1' },
    { id: 2, label: 'Invoice 2' },
    { id: 3, label: 'Invoice 3' },
  ];

  const [selected, setSelected] = useState(original);

  return (
    <Stack>
      <Button onClick={() => setSelected(original)}>Cool button</Button>
      <MultiSelect
        grouped={false}
        value={selected}
        selections={Array.from({ length: 20 }).map((_, i) => ({
          id: i,
          label: `Invoice ${i}`,
        }))}
        onChange={setSelected}
        closeMenuOnSelect={false}
      />
      <MultiSelect
        value={selected}
        selections={Array.from({ length: 20 }).map((_, i) => ({
          id: i,
          label: `Invoice ${i}`,
        }))}
        onChange={setSelected}
        closeMenuOnSelect={false}
      />
      <MultiSelect
        selections={Array.from({ length: 10 }).map((_, i) => ({
          id: i,
          label: `Invoice ${i}`,
        }))}
        label="invoices"
        placeholder="Cool placeholder"
        value={[
          { id: 1, label: 'Invoice 1' },
          { id: 2, label: 'Invoice 2' },
        ]}
      />
      <MultiSelect width="50%" value={[]} selections={[]} onChange={() => {}} error={true} />
      <MultiSelect width="200px" value={[]} selections={[]} onChange={() => {}} disabled />
    </Stack>
  );
};

export const index = () => {
  return <Wrapper />;
};