import React from "react"
import { useState } from "react"
import { MdMoreVert } from "react-icons/md"
import { useOutsideClickRef } from "rooks"
import MoreMenuEntry from "./MoreMenuEntry"

const MoreMenu: React.FC = () => {
	const [showMenu,setShowMenu] = useState(false)

	const [outsideRef] = useOutsideClickRef(()=>{
		setShowMenu(false)
	})

	return <>
		<button
			onClick={()=>{
				setShowMenu(!showMenu)
			}}
		>
			<MdMoreVert size="40"/>
		</button>
		<div className="" ref={outsideRef} >
			{
				showMenu && (
					<div className="absolute -ml-32 bg-white dark:bg-gray-800 p-2 border-2 dark:border-gray-900">
						{/* TODO: there has got to be a better way than "w-36" */}
						<div className="w-36">
							<ul>
								<MoreMenuEntry>
									Menu 1
								</MoreMenuEntry>
								<MoreMenuEntry>
									Menu 2
								</MoreMenuEntry>
								<MoreMenuEntry
									onclick={()=>{
										setShowMenu(false)
									}}
								>
									Logout
								</MoreMenuEntry>
							</ul>
						</div>
					</div>
				)
			}
		</div>
	</>
}

export default MoreMenu