/** Overflow navigation for non-tab destinations. */

import { useState } from "preact/hooks";
import { logout } from "../api";
import { navigate } from "../router";
import { Pressable } from "./Pressable";
import { Sheet } from "./Sheet";

export function MoreMenu() {
  const [open, setOpen] = useState(false);
  const go = (path: string) => {
    setOpen(false);
    navigate(path);
  };
  return (
    <>
      <Pressable className="top-action" ariaLabel="More" onClick={() => setOpen(true)}>•••</Pressable>
      <Sheet open={open} title="More" onClose={() => setOpen(false)}>
        <div class="menu-list">
          <Pressable className="menu-row" onClick={() => go("/history")}>History</Pressable>
          <Pressable className="menu-row" onClick={() => go("/remedies")}>Remedies</Pressable>
          <Pressable className="menu-row" onClick={() => go("/settings")}>Settings</Pressable>
          <Pressable
            className="menu-row destructive-text"
            onClick={async () => {
              await logout();
              navigate("/login");
            }}
          >
            Logout
          </Pressable>
        </div>
      </Sheet>
    </>
  );
}