/** 조사결과·침수이력의 지도 스타일. 기존 값과 처리 순서를 유지한다. */
import Fill from "ol/style/Fill.js";
import Icon from "ol/style/Icon.js";
import Stroke from "ol/style/Stroke.js";
import Style from "ol/style/Style.js";
import Text from "ol/style/Text.js";
import {
  EXMN_GRADE_COLORS,
  EXMN_RESULT_MANHOLE_ICON_SRC,
} from "../model/map-constants";

export const getExmnGradeColor = (feature: any) => {
  const grade = Number(feature?.get?.("structuralGrade") ?? 0);
  return EXMN_GRADE_COLORS[grade] ?? "#2563eb";
};

export const createExmnPipeStyle = (feature: any) =>
  new Style({
    stroke: new Stroke({
      color: getExmnGradeColor(feature),
      width: 4,
    }),
  });

// 레이어 트리 범례와 지도 피처가 동일한 기존 맨홀 형태의 보라색 심볼을 사용한다.
export const createExmnManholeStyle = () =>
  new Style({
    image: new Icon({
      src: EXMN_RESULT_MANHOLE_ICON_SRC,
      anchor: [0.5, 0.5],
      anchorXUnits: "fraction",
      anchorYUnits: "fraction",
    }),
  });

export const createFldngHstryAreaStyle = (label: string) =>
  new Style({
    fill: new Fill({
      color: "rgba(30, 136, 229, 0.16)",
    }),
    stroke: new Stroke({
      color: "rgba(30, 136, 229, 0.95)",
      width: 3,
    }),
    text: new Text({
      text: label,
      font: "700 12px sans-serif",
      fill: new Fill({ color: "#ffffff" }),
      backgroundFill: new Fill({ color: "rgba(15, 23, 42, 0.88)" }),
      padding: [4, 7, 4, 7],
      overflow: true,
    }),
    zIndex: 9994,
  });

export const createFldngHstryDepthStyle = (label: string, color: string) =>
  new Style({
    fill: new Fill({
      color,
    }),
    stroke: new Stroke({
      color: "rgba(71, 85, 105, 0.72)",
      width: 1.4,
    }),
    text: new Text({
      text: label,
      font: "700 11px sans-serif",
      fill: new Fill({ color: "#0f172a" }),
      overflow: true,
    }),
    zIndex: 9993,
  });