import { Button } from "@code/ui/components/button";
import { Menu, Settings } from "lucide-react";
import { useState } from "react";

import type { WorkspaceState } from "@/lib/workspace/types";

import { ProjectSettingsPanel } from "./project-settings-panel";

export const ProjectHeader = ({
  onOpenDrawer,
  workspace,
}: {
  readonly onOpenDrawer: () => void;
  readonly workspace: WorkspaceState;
}) => {
  const [settingsOpen, setSettingsOpen] = useState(false);
  const works = workspace.works ?? [];

  return (
    <header className="relative flex h-14 shrink-0 items-center border-b border-[#d7d3c7] bg-[#faf9f4] px-4">
      <div className="min-w-0 flex-1 pr-2">
        <select
          aria-label="Current project"
          className="block h-7 max-w-full border-0 bg-transparent pr-7 text-sm font-semibold text-[#20201d] outline-none"
          onChange={(event) => workspace.selectProject(event.target.value)}
          value={workspace.selectedProject?.id ?? ""}
        >
          {(workspace.projects ?? []).map((project) => (
            <option key={project.id} value={project.id}>
              {project.name}
            </option>
          ))}
        </select>
        <p className="text-[10px] uppercase text-[#858277]">
          Conversation to proposed Work
        </p>
      </div>
      <Button
        aria-label="Project settings"
        className="mr-2 size-9"
        onClick={() => setSettingsOpen((open) => !open)}
        size="icon"
        variant="outline"
      >
        <Settings className="size-4" />
      </Button>
      <button
        className="flex h-9 items-center gap-2 border border-[#c9c5b9] bg-white px-3 text-xs lg:hidden"
        onClick={onOpenDrawer}
        type="button"
      >
        <Menu className="size-4" /> Work{" "}
        {workspace.works === undefined ? "…" : works.length}
      </button>
      {settingsOpen ? (
        <ProjectSettingsPanel
          onClose={() => setSettingsOpen(false)}
          workspace={workspace}
        />
      ) : null}
    </header>
  );
};
