import React, { useState } from "react";
import Badge from "../components/badge";
import { useStore } from "../stores/global-stores";
import { sendIpcMessage } from "../utils/ipcEvent";

export default function TopNav({
  updateGlobalQuery,
}: {
  updateGlobalQuery: (newQuery: string) => void;
}) {
  const [pinned, setPinned] = useState(false);
  const [routes, popRoute, clearRoute] = useStore((states) => [
    states.routes,
    states.popRoute,
    states.clearRoute,
  ]);
  return (
    <div className="mx-3 flex justify-between items-stretch">
      <div className="flex gap-1">
        <Badge
          title="Home"
          iconPath={"./images/icon-home.svg"}
          onClick={() => {
            clearRoute();
            updateGlobalQuery("");
          }}
        />
        {routes?.length > 0 &&
          routes.map((route) => (
            <Badge
              key={route}
              title={route}
              onClick={() => {
                console.log("poping route", route);
                popRoute(route);
              }}
            />
          ))}
      </div>
      <div
        className="window-draggable"
        style={{
          flex: 1,
        }}
      />
      <div
        onClick={() => {
          if (pinned) {
            sendIpcMessage("unpin-spotlight");
            setPinned(false);
          } else {
            setPinned(true);
            sendIpcMessage("pin-spotlight");
          }
        }}
      >
        <Badge title={pinned ? "Unpin Spotlight" : "pin Spotlight"} />
      </div>
    </div>
  );
}