import { Select } from "../ui/index.ts";
import { useProjectContext } from "./ProjectContext.ts";

const NEW = " new";   // служебное значение пункта «Новый проект…»: метка пробелов содержать не может

export function ProjectPicker() {
  const { state, projects, select, openNew } = useProjectContext();
  const current = state.kind === "ok" ? state.project.label : "";
  return (
    <Select className="project-picker" aria-label="Проект" value={current}
      onChange={(e) => { if (e.target.value === NEW) openNew(); else select(e.target.value); }}>
      {current === "" && <option value="" disabled>выберите проект</option>}
      {projects.map((p) => <option key={p.label} value={p.label}>{p.label} — {p.name}</option>)}
      <option value={NEW}>＋ Новый проект…</option>
    </Select>
  );
}