import { useState } from "react";
import type { IssueDetail, NoteField } from "../api/types.ts";
import { fmtStamp } from "../board/model/util.ts";
import { NoteForm } from "./NoteForm.tsx";

const ROWS: [NoteField, string][] = [["work_kind", "Вид работы"], ["fact_status", "Статус по факту"], ["done_text", "Сделано"],
  ["rest_text", "Осталось"], ["owner_note", "Заметка владельца"]];

// служебные заметки (design 20): по умолчанию чтение, «Править» — форма; после сохранения или отмены — снова чтение
export function Notes({ issue }: { issue: IssueDetail }) {
  const [editing, setEditing] = useState(false);
  if (editing) return <NoteForm issue={issue} onDone={() => setEditing(false)} />;
  const n = issue.note;
  return (
    <section className="note view" aria-labelledby="notes-title">
      <div className="sec-head">
        <h3 id="notes-title">Служебные заметки</h3>
        <button className="btn sm" type="button" onClick={() => setEditing(true)}>Править</button>
      </div>
      <dl className="fields">
        {ROWS.map(([f, label]) => <div key={f}><dt>{label}</dt><dd>{n?.[f] || "—"}</dd></div>)}
      </dl>
      {n && <p className="hint">изменено {fmtStamp(n.updated_at)}, {n.updated_by}</p>}
    </section>
  );
}