import { useQueryClient } from "@tanstack/react-query";
import { clearToken } from "../auth/token.ts";
import { withProject } from "../projects/current.ts";
import { ProjectPicker } from "../projects/ProjectPicker.tsx";
import { Menu, MenuItem, Segmented, ThemeSwitch } from "../ui/index.ts";
import { DataStatus } from "./DataStatus.tsx";

export type Section = "/board" | "/issues";

// верхняя панель (design.md, решение 9); section = null на путях вне разделов — активной ссылки нет (T5.1): название, проект, разделы, состояние данных, тема, меню «Ещё»
export function AppBar({ section, project }: { section: Section | null; project: string | null }) {
  const qc = useQueryClient();
  const href = (to: Section) => (project ? to + withProject("", project) : to);
  return (
    <header className="appbar">
      <span className="appbar__brand">Хаб Jira</span>
      <ProjectPicker />
      <Segmented label="Раздел" value={section}
        options={[{ value: "/board", label: "Доска связей", href: href("/board") }, { value: "/issues", label: "Задачи", href: href("/issues") }]} />
      <span className="appbar__spacer" />
      <DataStatus project={project} />
      <ThemeSwitch />
      <Menu label="Ещё">
        {(close) => <MenuItem onSelect={() => { close(); clearToken(); qc.clear(); }}>Сменить токен</MenuItem>}
      </Menu>
    </header>
  );
}