import React, { useState, useEffect } from "react";
import { twMerge } from "tailwind-merge";
import {
  useFloating,
  autoUpdate,
  offset,
  flip,
  shift,
} from "@floating-ui/react";

interface DropDownProps {
  buttonText: string;
  buttonClass?: string;
  dropdownClass?: string;
  children: React.ReactNode;
  leading?: React.ReactNode;
  ending?: React.ReactNode;
}

const DropDown: React.FC<DropDownProps> = ({
  buttonText,
  buttonClass,
  dropdownClass,
  children,
  leading,
  ending,
}) => {
  const [isOpen, setIsOpen] = useState(false);

  const { refs, floatingStyles } = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
    whileElementsMounted: autoUpdate,
    placement: "bottom-start",
    middleware: [offset(8), flip(), shift()],
  });

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  const handleClickOutside = (event: MouseEvent) => {
    if (
      refs.floating.current &&
      !refs.floating.current.contains(event.target as Node)
    ) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <div className="relative z-[1000]">
      <button
        id="dropdownBgHoverButton"
        data-dropdown-toggle="dropdownBgHover"
        className={twMerge(
          "text-zinc-800 bg-white hover:opacity-80 border border-zinc-300 focus:ring-1 focus:outline-none focus:ring-zinc-500 font-medium rounded text-sm px-4 py-1.5 text-center inline-flex items-center",
          buttonClass
        )}
        type="button"
        onClick={toggleDropdown}
        ref={refs.setReference}
      >
        {leading}
        {buttonText}
        {ending}
      </button>

      {isOpen && (
        <div
          id="dropdownBgHover"
          className={`absolute z-10 bg-white rounded shadow ${dropdownClass}`}
          ref={refs.setFloating}
          style={{
            ...floatingStyles,
          }}
        >
          <ul
            className="p-3 space-y-1 text-sm text-gray-700 border rounded border-zinc-300 max-h-[500px] overflow-y-auto"
            aria-labelledby="dropdownBgHoverButton"
          >
            {children}
          </ul>
        </div>
      )}
    </div>
  );
};

export default DropDown;