import React, { useRef, useState } from 'react';
import { Box, Button, Drop, DropButton, Layer, TextInput } from 'grommet';

const alignRight = { left: 'right' };
const alignLeft = { right: 'left' };

const MultipleDrop = () => {
  const [showDrop, setShowDrop] = useState(false);
  const targetRef = useRef();

  return (
    // Uncomment <Grommet> lines when using outside of storybook
    // <Grommet theme={...}>
    <Box gap="medium" fill align="center" justify="center">
      <Button
        ref={targetRef}
        label="button"
        onClick={() => setShowDrop(!showDrop)}
      />
      {showDrop && (
        <Drop
          align={alignRight}
          target={targetRef.current}
          onClickOutside={() => setShowDrop(false)}
        >
          <Box pad="large">
            <TextInput
              value=""
              onChange={() => {}}
              suggestions={['one', 'two']}
            />
          </Box>
        </Drop>
      )}
    </Box>
    // </Grommet>
  );
};

export const Multiple = () => <MultipleDrop />;
Multiple.parameters = {
  chromatic: { disable: true },
};
Multiple.args = {
  full: true,
};

export default {
  title: 'Controls/Drop/Multiple',
};