import React from 'react';
import { Menu, MenuList, MenuButton, MenuItem, MenuItems, MenuPopover, MenuLink } from '@reach/menu-button';
import { m, AnimatePresence } from 'framer-motion';

const MotionDialogOverlay = m(DialogOverlay);
const MotionDialogContent = m(DialogContent);

function MobileMenu(props) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <Menu>
      <MenuButton>
        Actions <span aria-hidden>▾</span>
      </MenuButton>
      <MenuList>
        <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
        <MenuItem onSelect={() => alert('Copy')}>Create a Copy</MenuItem>
        <MenuItem onSelect={() => alert('Mark as Draft')}>Mark as Draft</MenuItem>
        <MenuItem onSelect={() => alert('Delete')}>Delete</MenuItem>
        <MenuLink as="a" href="https://reacttraining.com/workshops/">
          Attend a Workshop
        </MenuLink>
      </MenuList>
    </Menu>
  );
}

export function DropMenu({
  isOpen,
  setIsOpen,
  duration = 0.25,
  children,
  /* overlay props */
  initialFocusRef,
  allowPinchZoom,
  dangerouslyBypassFocusLock,
  dangerouslyBypassScrollLock,
  /* other */
  ...restProps
} = {}) {
  const closeHandler = () => setIsOpen(false);
  return (
    <AnimatePresence>
      {isOpen && (
        <MotionDialogOverlay
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration }}
          onDismiss={closeHandler}
          className="d-flex"
          {...{
            initialFocusRef,
            allowPinchZoom,
            dangerouslyBypassFocusLock,
            dangerouslyBypassScrollLock,
          }}
        >
          <MotionDialogContent
            initial={{ y: 20 }}
            animate={{ y: 0 }}
            exit={{ y: 20 }}
            transition={{ duration }}
            {...restProps}
          >
            {children}
          </MotionDialogContent>
        </MotionDialogOverlay>
      )}
    </AnimatePresence>
  );
}