import React, { useEffect } from "react";
import { createPopper } from "@popperjs/core";

export function DropDownItem(props) {
  return <button
    className={"text-sm text-left py-2 px-4 focus:outline-none block w-full whitespace-no-wrap bg-transparent hover:bg-secondary text-primary"}
    onClick={(e) => e.preventDefault()}
  >
    {props.children}
  </button>;
}
export default function Dropdown(props) {
  // dropdown props
  const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
  const btnDropdownRef = React.createRef();
  const popoverDropdownRef = React.createRef();
  const openDropdownPopover = () => {
    createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
      placement: props.placement ?? "left-start",
    });
    setDropdownPopoverShow(true);
  };
  const closeDropdownPopover = () => {
    setDropdownPopoverShow(false);
  };

  function handleOutsideClick(event) {
    let node = popoverDropdownRef?.current;
    if (node && !node?.contains(event.target)) {
      closeDropdownPopover();
    }
  }

  useEffect(() => {
    if ('ontouchend' in window) {
      document.addEventListener('touchend', handleOutsideClick)
    } else {
      document.addEventListener('click', handleOutsideClick)
    }
    // Specify how to clean up after this effect:
    return function cleanup() {
      document.removeEventListener('touchend', handleOutsideClick)
      document.removeEventListener('click', handleOutsideClick)
    };
  });

  return (
    <>
      <a
        className="text-secondary py-1 px-3"
        href="#pablo"
        ref={btnDropdownRef}
        onClick={(e) => {
          e.preventDefault();
          dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover();
        }}
      >
        {props.button}
      </a>
      <div
        ref={popoverDropdownRef}
        className={
          (dropdownPopoverShow ? "block " : "hidden ") +
          "bg-trinary text-base z-50 float-left overflow-hidden text-left rounded-xl shadow-lg min-w-48"
        }
      >
        {props.children}
      </div>
    </>
  );
};