/* =============================================================================
 * B05_Profile_UI_Profile_SideTool.ts
 * 종단도 오른쪽 판(배수유역도)을 두 보기에 **같은 모양 · 같은 켬끔 값**으로 끼운다
 * (계획서 24-2c · 24-2e). 판 본체는 `_Drainage_Side`(sub7), 켬 · 끔 값은 `drainage-visible`.
 * ========================================================================== */

import { readStateRaw, writeStateRaw } from "../A00_Common/b_page_state";
import type { DesignSideBoard, DesignSideFactory } from "../A00_Common/design/design_profile";
import {
  createDrainageSide,
  createDrainageToggleButton,
  type DrainageSideBoard,
} from "./B05_Profile_UI_Drainage_Side";

/** 오른쪽 판 — 켬 · 끔은 두 보기가 같은 값을 쓴다(기본 켬). */
export const drainageSide: DesignSideFactory = (host) =>
  createDrainageSide(host, { visible: readStateRaw("drainage-visible") !== "false" });

/** 켬 · 끔 단추 — 누를 때마다 값을 적는다. */
export function drainageSideTool(board: DesignSideBoard): HTMLElement {
  const side = board as DrainageSideBoard;
  side.onVisibleChange((visible) => writeStateRaw("drainage-visible", String(visible)));
  return createDrainageToggleButton(side);
}