/* =============================================================================
 * D03_PlanAnalysis_UI_DrawPanel.ts
 * D03 좌측 「그리기」 칸 몸(PLAN 599-1 · 599-4 · 요구 463-10 · 22) — [긋기] · 구간 나눔 마커 · 긋기 방식 칸.
 *
 *   방식 칸 `createDrawKindFields` = 공용 `A00_Common/map/map_draw_kind`(626-3) — 그리기 칸 · 노드 판(598-4) ·
 *     B05 평면 예정노선 그리기가 같은 부품을 씀(여기서 다시 내보냄).
 *   구간 나눔 마커 = 끌어 선 위에 놓기(`YEAR_MARK_DRAG` · 받음 = `D03_PlanAnalysis_UI_Edit` drop).
 *   설명 글 없음(요구 463-6) — 칸 오류 · ≈ ° 값만.
 * ========================================================================== */

import { createButton } from "@ui/ui_template_elements";
import { YEAR_MARK_DRAG } from "./D03_PlanAnalysis_UI_Map";
import type { DrawKindFields } from "../A00_Common/map/map_draw_kind";
import { featureOn, type PlanPage } from "./D03_PlanAnalysis_UI_Features";
import "./D03_PlanAnalysis_UI_DrawParts.css";

// 방식 칸 = 공용(`A00_Common/map/map_draw_kind` · 626-3 · B05 평면 예정노선 그리기도 씀)
export {
  createDrawKindFields,
  DRAW_DEFAULT_LENGTH_M,
  DRAW_DEFAULT_SLOPE_PCT,
  DRAW_KIND_LABELS,
  type DrawConstraint,
  type DrawKindFields,
  type DrawKindValue,
} from "../A00_Common/map/map_draw_kind";

export interface DrawPanel {
  root: HTMLElement;
  /** 단추 글 · 막힘 — 긋는 중 · 고칠 수 있음 · 마커 놓을 선 있음. */
  state: (state: { drawing: boolean; editable: boolean; canMark: boolean }) => void;
}

/** 좌측 「그리기」 칸 — [긋기] · 구간 나눔 마커(끌기) · 방식 칸. */
export function createDrawPanel(opts: {
  kind: DrawKindFields;
  onDraw: () => void;
  /** 기능 표 페이지 — 구간 나눔 마커 단추 = 「years」 사용일 때만. */
  page: PlanPage;
}): DrawPanel {
  const drawButton = createButton({
    label: "긋기",
    variant: "filled",
    size: 28,
    onClick: opts.onDraw,
  });
  const markButton = createButton({
    label: "구간 나눔",
    variant: "ghost",
    size: 28,
    iconStart: "flag",
  });
  markButton.title = "선 위로 끌어 놓으면 구간을 나눕니다";
  markButton.dataset.role = "draw-year-mark";
  markButton.hidden = !featureOn(opts.page, "years");
  markButton.draggable = true;
  markButton.addEventListener("dragstart", (event) => {
    event.dataTransfer?.setData(YEAR_MARK_DRAG, "1");
    if (event.dataTransfer) event.dataTransfer.effectAllowed = "copy";
  });
  const row = document.createElement("div");
  row.className = "d03-plan__row";
  row.append(drawButton, markButton);
  const root = document.createElement("div");
  root.className = "d03-plan__draw";
  root.append(row, opts.kind.root);
  return {
    root,
    state({ drawing, editable, canMark }) {
      drawButton.querySelector(".ui-btn__label")!.textContent = drawing ? "긋기 끝" : "긋기";
      drawButton.disabled = !editable;
      drawButton.setAttribute("aria-pressed", String(drawing));
      markButton.disabled = !editable || drawing || !canMark;
      root.dataset.mode = drawing ? "draw" : "idle";
    },
  };
}