import React from 'react';

import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
import {FormField} from '@workday/canvas-kit-react/form-field';
import {Flex} from '@workday/canvas-kit-react/layout';
import {system} from '@workday/canvas-tokens-web';

const items = [
  {id: '1', text: 'Cheese'},
  {id: '2', text: 'Olives'},
  {id: '3', text: 'Onions'},
  {id: '4', text: 'Pepperoni'},
  {id: '5', text: 'Peppers'},
];

export default () => {
  const formRef = React.useRef<HTMLFormElement>(null);
  const [value, setValue] = React.useState('1');
  const [label, setLabel] = React.useState('Cheese');

  function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
    const value = event.currentTarget.value;
    setValue(value);
    setLabel(
      value
        .split(', ')
        .map(item => items.find(i => i.id === item)?.text || 'Not Found')
        .join(', ')
    );
  }

  return (
    <form
      onSubmit={e => {
        console.log('form submitted');
        e.preventDefault();
      }}
      ref={formRef}
    >
      <Flex cs={{gap: system.gap.md, flexDirection: 'column'}}>
        <MultiSelect items={items}>
          <FormField orientation="horizontalStart">
            <FormField.Label>Toppings</FormField.Label>
            <FormField.Input
              as={MultiSelect.Input}
              placeholder="Select Multiple"
              removeLabel="Remove"
              name="toppings"
              onChange={handleOnChange}
              value={value}
            />
            <MultiSelect.Popper>
              <MultiSelect.Card>
                <MultiSelect.List>
                  {item => (
                    <MultiSelect.Item data-id={item.id}>
                      <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
                    </MultiSelect.Item>
                  )}
                </MultiSelect.List>
              </MultiSelect.Card>
            </MultiSelect.Popper>
          </FormField>
        </MultiSelect>
        <Flex cs={{gap: system.gap.md}}>
          <SecondaryButton
            onClick={e => {
              setValue('1, 2, 3');
            }}
          >
            Set to "Cheese, Olives, Onions" via React `value`
          </SecondaryButton>
          <SecondaryButton
            onClick={e => {
              const input = formRef.current.querySelector('[name=toppings]') as HTMLInputElement;
              input.value = '1, 2';
            }}
          >
            Set to "Cheese, Olives" via DOM `value`
          </SecondaryButton>
        </Flex>
        <div>
          <PrimaryButton type="submit">Submit</PrimaryButton>
        </div>
        <div>Selected ID: {value}</div>
        <div>Selected Label: {label}</div>
      </Flex>
    </form>
  );
};