import {Menubar,} 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/
            </h3>
          </div>

          <button onClick={() => {
            state.setState({aboutDialog: true});
          }}
                  className="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent hover:bg-accent">
            About
          </button>

          {OsuRenderer.beatmap && (
              <>
                {OsuRenderer.replay2 == null && (
                <a href={"https://nise.moe/s/" + OsuRenderer.replay.info.id} target="_blank"
                   className="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent hover:bg-accent">
                  View on nise.moe
                </a>)}
                {OsuRenderer.replay2 && (
                    <a href={"https://nise.moe/p/" + OsuRenderer.replay.info.id + "/" + OsuRenderer.replay2.info.id} target="_blank"
                          className="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent hover:bg-accent">
                         View on nise.moe
                    </a>)}
              </>
          )}
        </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>
  );
}