import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/interface/components/ui/menubar";
import { OsuRenderer } from "@/osu/OsuRenderer";
import { state } from "@/utils";

export function Navbar() {
  const { beatmap, mods } = state();
  return (
    <Menubar className="rounded-none border-x-0 border-t-0 flex justify-between px-4">
      <div className="flex gap-2">
        <div className="flex items-center gap-2">
          <img src={"https://nise.moe/assets/keisatsu-chan.png"} width={48}/>
          <h3 className="scroll-m-20 text-lg font-semibold tracking-tight">
            Replay Viewer
          </h3>
        </div>

        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem
              onClick={() => {
                state.setState({ aboutDialog: true });
              }}
            >
              About
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>

        {OsuRenderer.beatmap && (
          <>
            {" "}
            <MenubarMenu>
              <MenubarTrigger>Analyzer</MenubarTrigger>
              <MenubarContent>
                <MenubarItem
                  onClick={() => {
                    state.setState({ dataAnalysisDialog: true });
                  }}
                >
                  gRDA
                </MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </>
        )}
      </div>

      {beatmap && (
        <div className="flex gap-4 items-center">
          {mods?.map((mod) => {
            return (
              <img
                src={`./mod_${mod.acronym.toLowerCase()}.png`}
                className="h-5"
              ></img>
            );
          })}
          <div className="flex flex-col items-end">
            <p className="text-xs opacity-75">Currently Viewing</p>

            <p className="text-xs font-bold">
              {beatmap?.metadata.artist} - {beatmap?.metadata.title}
            </p>
          </div>
          <img
            src={`https://assets.ppy.sh/beatmaps/${beatmap?.metadata.beatmapSetId}/covers/cover.jpg?${beatmap?.metadata.beatmapId}`}
            alt=""
            width={90}
            className="rounded-sm"
          />
        </div>
      )}
    </Menubar>
  );
}