import React, { useState } from 'react';
import { Close } from 'grommet-icons';

import { Box, Button, DropButton, Heading } from 'grommet';

const align = { top: 'bottom' };

const SimpleDropButton = () => {
  const [open, setOpen] = React.useState();
  const [hover, setHover] = useState(false);
  const onOpen = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  return (
    <Box align="center" pad="large">
      <DropButton
        label="Open"
        open={open}
        onOpen={onOpen}
        onClose={onClose}
        dropContent={
          <Box pad="small">
            <Box
              onMouseOver={() => setHover(true)}
              onMouseLeave={() => setHover(false)}
              justify="between"
              align="center"
            >
              <Heading
                style={{ backgroundColor: hover ? 'yellow' : undefined }}
                level={3}
                margin="small"
              >
                Heading
              </Heading>
              <Heading level={3} margin="small">
                Heading
              </Heading>
              <Heading level={3} margin="small">
                Heading
              </Heading>
              <Heading level={3} margin="small">
                Heading
              </Heading>
              <Heading level={3} margin="small">
                Heading
              </Heading>
              <Heading level={3} margin="small">
                Heading
              </Heading>
              <Heading level={3} margin="small">
                Heading
              </Heading>
              <Heading level={3} margin="small">
                Heading
              </Heading>
              <Button icon={<Close />} onClick={onClose} />
            </Box>
          </Box>
        }
        dropProps={{ align }}
      />
    </Box>
  );
};

export const Simple = () => <SimpleDropButton />;
Simple.parameters = {
  chromatic: { disable: true },
};

export default {
  title: 'Controls/DropButton/Simple',
};