import type { components } from "../../../contracts/studio/generated.ts";
import { OrderedTextList } from "./ordered-text-list.tsx";

type ProjectDecisionInput = components["schemas"]["ProjectDecisionInput"];

export function ProjectDecisionFields({
  draft,
  onChange,
}: {
  draft: ProjectDecisionInput;
  onChange(draft: ProjectDecisionInput): void;
}) {
  const update = (patch: Partial<ProjectDecisionInput>) => {
    onChange({ ...draft, ...patch });
  };

  return (
    <section
      className="studio-editor-section"
      aria-labelledby="studio-project-decision-fields-title"
    >
      <div className="studio-editor-section-heading">
        <p className="studio-eyebrow">PROJECT DECISION</p>
        <h2 id="studio-project-decision-fields-title">프로젝트 결정</h2>
      </div>
      <div className="studio-field-grid">
        <label className="studio-field">
          <span>결정 상태</span>
          <select
            value={draft.decisionStatus ?? ""}
            onChange={(event) => {
              const value = event.currentTarget.value;
              update({
                decisionStatus: value === "PROPOSED" || value === "ADOPTED"
                  ? value
                  : null,
              });
            }}
          >
            <option value="">아직 정하지 않음</option>
            <option value="PROPOSED">PROPOSED</option>
            <option value="ADOPTED">ADOPTED</option>
          </select>
        </label>
        <label className="studio-field">
          <span>결정일</span>
          <input
            type="date"
            value={draft.decidedOn ?? ""}
            onChange={(event) => {
              update({ decidedOn: event.currentTarget.value || null });
            }}
          />
        </label>
        <label className="studio-field studio-field--wide">
          <span>결정문</span>
          <textarea
            value={draft.statement}
            onChange={(event) => update({ statement: event.currentTarget.value })}
          />
        </label>
        <label className="studio-field studio-field--wide">
          <span>판단 이유</span>
          <textarea
            value={draft.rationale}
            onChange={(event) => update({ rationale: event.currentTarget.value })}
          />
        </label>
      </div>
      <OrderedTextList
        label="영향"
        fieldId="studio-field-consequences"
        items={draft.consequences}
        onChange={(consequences) => update({ consequences })}
      />
    </section>
  );
}