Aislo/B08_Quantity/B08_Quantity_UI_Side_FaceDressing.ts

/* =============================================================================
 * B08_Quantity_UI_Side_FaceDressing.ts
 * 산출 조건 「면고르기」 구획 — 절토면 토질 · 성토면 시공·토질 고르기 둘 + 면적 덮어쓰기 둘
 * (2026-09-14 브레인 판정 Ⓐ~Ⓓ · 서버 ee9368ec).
 *
 * 페이지 본문(`B08_Quantity_UI_Page.ts`)이 700줄을 넘어 새 칸을 이 파일로 뺌(CLAUDE.md 4장).
 * ⚠ 선택지는 **서버가 내려준 목록 그대로**(`face_dressing_choices`) — 화면에 다시 적지 않음(두 벌 금지).
 * ⚠ 제안값 없음(판정 Ⓒ) — 첫 보기가 「안 정함」이고 비면 내역 줄이 입력 사유로 섬.
 * ⚠ 면적은 화면이 셈하지 않음 — 비우면 서버가 파종 면적(초류종자살포 × 반영률)을 씀.
 * ========================================================================== */

import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import type { SideFieldHelpers } from "./B08_Quantity_UI_Side_TreeWaste";

function L(key: keyof typeof ui_locales): string {
  return ui_locales[key][currentLanguageIndex];
}

export interface FaceDressingDraft {
  /** `""` 는 「안 정함」 — 서버가 선택지 밖 값도 `""` 로 되돌림. */
  face_dressing_cut_class: string;
  face_dressing_fill_class: string;
  /** `null` 은 「파종 면적 그대로」. */
  face_dressing_fill_area_m2: number | null;
  face_dressing_cut_area_m2: number | null;
  dirty: boolean;
}

export interface FaceDressingChoices {
  cut: string[];
  fill: string[];
}

export function appendFaceDressingFields(
  panel: HTMLElement,
  draft: FaceDressingDraft,
  choices: FaceDressingChoices | undefined,
  h: SideFieldHelpers,
): void {
  if (!choices) return;
  const pick = (
    label: keyof typeof ui_locales,
    value: string,
    list: string[],
    set: (value: string) => void,
  ): HTMLElement =>
    h.selectField(
      L(label),
      value,
      [
        { value: "", label: L("B08_Quantity_FaceDressing_Unset") },
        ...list.map((name) => ({ value: name, label: name })),
      ],
      (picked) => {
        set(picked);
        draft.dirty = true;
      },
    );
  const area = (
    label: keyof typeof ui_locales,
    value: number | null,
    set: (v: number | null) => void,
  ) => {
    const row = h.optionalNumberField(L(label), value, "0.01", (typed) => {
      set(typed);
      draft.dirty = true;
    });
    const input = row.querySelector("input");
    if (input) input.placeholder = L("B08_Quantity_FaceDressing_Area_Placeholder");
    return row;
  };

  panel.append(h.field(L("B08_Quantity_Side_FaceDressing"), ""));
  panel.append(
    pick("B08_Quantity_FaceDressing_Cut", draft.face_dressing_cut_class, choices.cut, (v) => {
      draft.face_dressing_cut_class = v;
    }),
  );
  panel.append(
    pick("B08_Quantity_FaceDressing_Fill", draft.face_dressing_fill_class, choices.fill, (v) => {
      draft.face_dressing_fill_class = v;
    }),
  );
  panel.append(
    area("B08_Quantity_FaceDressing_FillArea", draft.face_dressing_fill_area_m2, (v) => {
      draft.face_dressing_fill_area_m2 = v;
    }),
  );
  panel.append(
    area("B08_Quantity_FaceDressing_CutArea", draft.face_dressing_cut_area_m2, (v) => {
      draft.face_dressing_cut_area_m2 = v;
    }),
  );
  panel.append(h.hintRow(L("B08_Quantity_Side_FaceDressing_Hint")));
}