/* =============================================================================
 * B05_Profile_UI_Drainage_Show.ts
 * 배수유역 판 표시 토글 상태 — 위성 · 도엽 · 화살표 · 강도 · 집중점 · 상류 세류
 * (`B05_Profile_UI_Drainage_Panel.ts` 에서 나눔 · 472-5 · 동작 같음).
 * ========================================================================== */

import { mountDrainageToggles, type DrainageLayer } from "./B05_Profile_UI_Drainage_Parts";

/** 지금 켜진 표시 — 그리기가 읽음(토글이 고침). */
export interface DrainageShow {
  arrows: boolean;
  /** 유입 강도 색칠 — B04 지도와 같은 색띠·같은 값(2026-08-01 사용자 지시). */
  strength: boolean;
  /** 유입 집중점 — 기본 꺼짐(마커가 관 마커와 겹쳐 읽기 어렵다). */
  hotspots: boolean;
  /** 유역 안쪽 상류 세류망 — B04 기준선 강조. */
  upstream: boolean;
}

/** 토글 줄을 붙이고 상태를 돌려줌 — 위성사진은 기본 꺼짐(2026-08-18 사용자 지시). */
export function mountDrainageShow(
  layerButtons: HTMLElement,
  deps: {
    backgroundImage: HTMLImageElement;
    activeLayers: Set<DrainageLayer>;
    onStrength: (show: boolean) => void;
    redraw: () => void;
  },
): DrainageShow {
  const show: DrainageShow = { arrows: true, strength: true, hotspots: false, upstream: true };
  deps.backgroundImage.hidden = true;
  mountDrainageToggles(layerButtons, {
    initial: { satellite: false, ...show },
    onSatellite: (next) => {
      deps.backgroundImage.hidden = !next;
      deps.redraw();
    },
    onSheetLayer: (layer, next) => {
      if (next) deps.activeLayers.add(layer);
      else deps.activeLayers.delete(layer);
      deps.redraw();
    },
    onArrows: (next) => {
      show.arrows = next;
      deps.redraw();
    },
    onStrength: (next) => {
      show.strength = next;
      deps.onStrength(next);
      deps.redraw();
    },
    onHotspots: (next) => {
      show.hotspots = next;
      deps.redraw();
    },
    onUpstream: (next) => {
      show.upstream = next;
      deps.redraw();
    },
  });
  return show;
}