import type { StyleSpecification } from "maplibre-gl";
import { SOURCE_LAYERS } from "./sources";

export const waterNetworkLayers: StyleSpecification["layers"] = [
  {
    id: "pipes-casing",
    type: "line",
    source: "pipes",
    "source-layer": SOURCE_LAYERS.pipes,
    minzoom: 9,
    paint: {
      "line-color": "rgba(255,255,255,0.86)",
      "line-width": [
        "interpolate",
        ["linear"],
        ["zoom"],
        9,
        1,
        13,
        2.4,
        17,
        ["+", 5, ["/", ["coalesce", ["get", "diameter"], 100], 280]]
      ],
      "line-opacity": 0.9
    }
  },
  {
    id: "pipes-flow",
    type: "line",
    source: "pipes",
    "source-layer": SOURCE_LAYERS.pipes,
    minzoom: 9,
    paint: {
      "line-color": [
        "case",
        ["==", ["get", "status"], "Closed"],
        "#9ca3af",
        [">=", ["coalesce", ["get", "diameter"], 0], 600],
        "#0477bf",
        [">=", ["coalesce", ["get", "diameter"], 0], 300],
        "#0aa6a6",
        "#3dbf7f"
      ],
      "line-width": [
        "interpolate",
        ["linear"],
        ["zoom"],
        9,
        0.8,
        13,
        1.8,
        17,
        ["+", 2.5, ["/", ["coalesce", ["get", "diameter"], 100], 360]]
      ],
      "line-opacity": 0.82
    }
  },
  {
    id: "pipes-risk-glow",
    type: "line",
    source: "pipes",
    "source-layer": SOURCE_LAYERS.pipes,
    minzoom: 12,
    filter: [">=", ["coalesce", ["get", "diameter"], 0], 600],
    paint: {
      "line-color": "#ff7a45",
      "line-width": ["interpolate", ["linear"], ["zoom"], 12, 2.6, 17, 7.5],
      "line-blur": 2.5,
      "line-opacity": 0.22
    }
  },
  {
    id: "pipes-hover",
    type: "line",
    source: "pipes",
    "source-layer": SOURCE_LAYERS.pipes,
    minzoom: 9,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": "#111827",
      "line-width": 7,
      "line-opacity": 0.35
    }
  },
  {
    id: "junctions-halo",
    type: "circle",
    source: "junctions",
    "source-layer": SOURCE_LAYERS.junctions,
    minzoom: 13,
    paint: {
      "circle-color": "#ffffff",
      "circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 2.8, 17, 6],
      "circle-opacity": 0.82,
      "circle-stroke-color": "rgba(15,23,42,0.22)",
      "circle-stroke-width": 1
    }
  },
  {
    id: "junctions",
    type: "circle",
    source: "junctions",
    "source-layer": SOURCE_LAYERS.junctions,
    minzoom: 13,
    paint: {
      "circle-color": [
        "interpolate",
        ["linear"],
        ["coalesce", ["get", "demand"], 0],
        0,
        "#70c1b3",
        20,
        "#247ba0",
        60,
        "#f25f5c"
      ],
      "circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 1.5, 17, 3.8],
      "circle-opacity": 0.86
    }
  },
  {
    id: "junctions-hover",
    type: "circle",
    source: "junctions",
    "source-layer": SOURCE_LAYERS.junctions,
    minzoom: 13,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "circle-color": "#111827",
      "circle-radius": ["interpolate", ["linear"], ["zoom"], 13, 5, 17, 10],
      "circle-opacity": 0.2,
      "circle-stroke-color": "#111827",
      "circle-stroke-width": 2
    }
  }
];