import type { StyleSpecification } from "maplibre-gl";
import {
  CLOSED_CONDUIT_COLOR,
  DRAINAGE_SELECTED_OUTLINE_COLORS,
  DRAINAGE_SOURCE_COLORS,
  DRAINAGE_SOURCE_OPACITIES
} from "./map-colors";
import { DRAINAGE_LAYER_VISUALS } from "./map-layer-visuals";
import { SOURCE_LAYERS } from "./sources";

export { DRAINAGE_SOURCE_COLORS } from "./map-colors";

export const INTERACTIVE_HIT_LAYER_IDS = [
  "conduits-hit",
  "junctions-hit",
  "orifices-hit",
  "pumps-hit",
  "outfalls-hit"
];

export const waterNetworkLayers: StyleSpecification["layers"] = [
  {
    id: "pipes-casing",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
    paint: {
      "line-color": "rgba(255,255,255,0.86)",
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.casingWidth,
      "line-opacity": 0.9
    }
  },
  {
    id: "pipes-flow",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
    paint: {
      "line-color": [
        "case",
        ["==", ["get", "status"], "Closed"],
        CLOSED_CONDUIT_COLOR,
        DRAINAGE_SOURCE_COLORS.conduits
      ],
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.width,
      "line-opacity": DRAINAGE_SOURCE_OPACITIES.conduits
    }
  },
  {
    id: "pipes-risk-glow",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    minzoom: 12,
    filter: [">=", ["coalesce", ["get", "diameter"], 0], 600],
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.conduits,
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.riskGlowWidth,
      "line-blur": 2.5,
      "line-opacity": 0.22
    }
  },
  {
    id: "pipes-hover-outline",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": "#ffffff",
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.hoverOutlineWidth,
      "line-opacity": 0.92
    }
  },
  {
    id: "pipes-hover",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.conduits,
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.hoverWidth,
      "line-opacity": 1
    }
  },
  {
    id: "pipes-selected-halo",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": "#ffffff",
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.selectedHaloWidth,
      "line-opacity": 1
    }
  },
  {
    id: "pipes-selected-outline",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SELECTED_OUTLINE_COLORS.conduits,
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.selectedOutlineWidth,
      "line-opacity": 1
    }
  },
  {
    id: "pipes-selected",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.conduits,
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.selectedWidth,
      "line-opacity": 1
    }
  },
  {
    id: "junctions-halo",
    type: "circle",
    source: "junctions",
    "source-layer": SOURCE_LAYERS.junctions,
    minzoom: DRAINAGE_LAYER_VISUALS.junctions.minzoom,
    paint: {
      "circle-color": "#ffffff",
      "circle-radius": DRAINAGE_LAYER_VISUALS.junctions.haloRadius,
      "circle-opacity": 0.76,
      "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: DRAINAGE_LAYER_VISUALS.junctions.minzoom,
    paint: {
      "circle-color": DRAINAGE_SOURCE_COLORS.junctions,
      "circle-radius": DRAINAGE_LAYER_VISUALS.junctions.radius,
      "circle-opacity": DRAINAGE_SOURCE_OPACITIES.junctions
    }
  },
  {
    id: "junctions-hover",
    type: "circle",
    source: "junctions",
    "source-layer": SOURCE_LAYERS.junctions,
    minzoom: DRAINAGE_LAYER_VISUALS.junctions.minzoom,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "circle-color": DRAINAGE_SOURCE_COLORS.junctions,
      "circle-radius": DRAINAGE_LAYER_VISUALS.junctions.hoverRadius,
      "circle-opacity": 0.24,
      "circle-stroke-color": DRAINAGE_SOURCE_COLORS.junctions,
      "circle-stroke-width": 2
    }
  },
  {
    id: "junctions-selected-halo",
    type: "circle",
    source: "junctions",
    "source-layer": SOURCE_LAYERS.junctions,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "circle-color": "#ffffff",
      "circle-radius": DRAINAGE_LAYER_VISUALS.junctions.selectedHaloRadius,
      "circle-opacity": 0.92
    }
  },
  {
    id: "junctions-selected",
    type: "circle",
    source: "junctions",
    "source-layer": SOURCE_LAYERS.junctions,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "circle-color": DRAINAGE_SOURCE_COLORS.junctions,
      "circle-radius": DRAINAGE_LAYER_VISUALS.junctions.selectedRadius,
      "circle-opacity": 1,
      "circle-stroke-color": DRAINAGE_SELECTED_OUTLINE_COLORS.junctions,
      "circle-stroke-width": 3
    }
  },
  {
    id: "orifices-casing",
    type: "line",
    source: "orifices",
    "source-layer": SOURCE_LAYERS.orifices,
    minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
    paint: {
      "line-color": "#ffffff",
      "line-width": DRAINAGE_LAYER_VISUALS.orifices.casingWidth,
      "line-opacity": 0.9
    }
  },
  {
    id: "orifices",
    type: "line",
    source: "orifices",
    "source-layer": SOURCE_LAYERS.orifices,
    minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.orifices,
      "line-width": DRAINAGE_LAYER_VISUALS.orifices.width,
      "line-opacity": DRAINAGE_SOURCE_OPACITIES.orifices
    }
  },
  {
    id: "orifices-hover-outline",
    type: "line",
    source: "orifices",
    "source-layer": SOURCE_LAYERS.orifices,
    minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": "#ffffff",
      "line-width": DRAINAGE_LAYER_VISUALS.orifices.hoverOutlineWidth,
      "line-opacity": 0.92
    }
  },
  {
    id: "orifices-hover",
    type: "line",
    source: "orifices",
    "source-layer": SOURCE_LAYERS.orifices,
    minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.orifices,
      "line-width": DRAINAGE_LAYER_VISUALS.orifices.hoverWidth,
      "line-opacity": 1
    }
  },
  {
    id: "orifices-selected-halo",
    type: "line",
    source: "orifices",
    "source-layer": SOURCE_LAYERS.orifices,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": "#ffffff",
      "line-width": DRAINAGE_LAYER_VISUALS.orifices.selectedHaloWidth,
      "line-opacity": 1
    }
  },
  {
    id: "orifices-selected-outline",
    type: "line",
    source: "orifices",
    "source-layer": SOURCE_LAYERS.orifices,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SELECTED_OUTLINE_COLORS.orifices,
      "line-width": DRAINAGE_LAYER_VISUALS.orifices.selectedOutlineWidth,
      "line-opacity": 1
    }
  },
  {
    id: "orifices-selected",
    type: "line",
    source: "orifices",
    "source-layer": SOURCE_LAYERS.orifices,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.orifices,
      "line-width": DRAINAGE_LAYER_VISUALS.orifices.selectedWidth,
      "line-opacity": 1
    }
  },
  {
    id: "pumps-casing",
    type: "line",
    source: "pumps",
    "source-layer": SOURCE_LAYERS.pumps,
    minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
    paint: {
      "line-color": "#ffffff",
      "line-width": DRAINAGE_LAYER_VISUALS.pumps.casingWidth,
      "line-opacity": 0.9
    }
  },
  {
    id: "pumps",
    type: "line",
    source: "pumps",
    "source-layer": SOURCE_LAYERS.pumps,
    minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.pumps,
      "line-width": DRAINAGE_LAYER_VISUALS.pumps.width,
      "line-opacity": DRAINAGE_SOURCE_OPACITIES.pumps
    }
  },
  {
    id: "pumps-hover-outline",
    type: "line",
    source: "pumps",
    "source-layer": SOURCE_LAYERS.pumps,
    minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": "#ffffff",
      "line-width": DRAINAGE_LAYER_VISUALS.pumps.hoverOutlineWidth,
      "line-opacity": 0.92
    }
  },
  {
    id: "pumps-hover",
    type: "line",
    source: "pumps",
    "source-layer": SOURCE_LAYERS.pumps,
    minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.pumps,
      "line-width": DRAINAGE_LAYER_VISUALS.pumps.hoverWidth,
      "line-opacity": 1
    }
  },
  {
    id: "pumps-selected-halo",
    type: "line",
    source: "pumps",
    "source-layer": SOURCE_LAYERS.pumps,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": "#ffffff",
      "line-width": DRAINAGE_LAYER_VISUALS.pumps.selectedHaloWidth,
      "line-opacity": 1
    }
  },
  {
    id: "pumps-selected-outline",
    type: "line",
    source: "pumps",
    "source-layer": SOURCE_LAYERS.pumps,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SELECTED_OUTLINE_COLORS.pumps,
      "line-width": DRAINAGE_LAYER_VISUALS.pumps.selectedOutlineWidth,
      "line-opacity": 1
    }
  },
  {
    id: "pumps-selected",
    type: "line",
    source: "pumps",
    "source-layer": SOURCE_LAYERS.pumps,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "line-color": DRAINAGE_SOURCE_COLORS.pumps,
      "line-width": DRAINAGE_LAYER_VISUALS.pumps.selectedWidth,
      "line-opacity": 1
    }
  },
  {
    id: "outfalls-halo",
    type: "circle",
    source: "outfalls",
    "source-layer": SOURCE_LAYERS.outfalls,
    minzoom: DRAINAGE_LAYER_VISUALS.outfalls.minzoom,
    paint: {
      "circle-color": "#ffffff",
      "circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.haloRadius,
      "circle-opacity": 0.9
    }
  },
  {
    id: "outfalls",
    type: "circle",
    source: "outfalls",
    "source-layer": SOURCE_LAYERS.outfalls,
    minzoom: DRAINAGE_LAYER_VISUALS.outfalls.minzoom,
    paint: {
      "circle-color": DRAINAGE_SOURCE_COLORS.outfalls,
      "circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.radius,
      "circle-stroke-color": "#7F1D2D",
      "circle-stroke-width": 1,
      "circle-opacity": DRAINAGE_SOURCE_OPACITIES.outfalls
    }
  },
  {
    id: "outfalls-hover",
    type: "circle",
    source: "outfalls",
    "source-layer": SOURCE_LAYERS.outfalls,
    minzoom: DRAINAGE_LAYER_VISUALS.outfalls.minzoom,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "circle-color": DRAINAGE_SOURCE_COLORS.outfalls,
      "circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.hoverRadius,
      "circle-opacity": 0.24,
      "circle-stroke-color": DRAINAGE_SOURCE_COLORS.outfalls,
      "circle-stroke-width": 2
    }
  },
  {
    id: "outfalls-selected-halo",
    type: "circle",
    source: "outfalls",
    "source-layer": SOURCE_LAYERS.outfalls,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "circle-color": "#ffffff",
      "circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.selectedHaloRadius,
      "circle-opacity": 0.92
    }
  },
  {
    id: "outfalls-selected",
    type: "circle",
    source: "outfalls",
    "source-layer": SOURCE_LAYERS.outfalls,
    filter: ["==", ["get", "id"], ""],
    paint: {
      "circle-color": DRAINAGE_SOURCE_COLORS.outfalls,
      "circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.selectedRadius,
      "circle-opacity": 1,
      "circle-stroke-color": DRAINAGE_SELECTED_OUTLINE_COLORS.outfalls,
      "circle-stroke-width": 3
    }
  },
  {
    id: "conduits-hit",
    type: "line",
    source: "conduits",
    "source-layer": SOURCE_LAYERS.conduits,
    minzoom: DRAINAGE_LAYER_VISUALS.conduits.minzoom,
    paint: {
      "line-color": "#000000",
      "line-width": DRAINAGE_LAYER_VISUALS.conduits.hitWidth,
      "line-opacity": 0
    }
  },
  {
    id: "junctions-hit",
    type: "circle",
    source: "junctions",
    "source-layer": SOURCE_LAYERS.junctions,
    minzoom: DRAINAGE_LAYER_VISUALS.junctions.minzoom,
    paint: {
      "circle-color": "#000000",
      "circle-radius": DRAINAGE_LAYER_VISUALS.junctions.hitRadius,
      "circle-opacity": 0
    }
  },
  {
    id: "orifices-hit",
    type: "line",
    source: "orifices",
    "source-layer": SOURCE_LAYERS.orifices,
    minzoom: DRAINAGE_LAYER_VISUALS.orifices.minzoom,
    paint: {
      "line-color": "#000000",
      "line-width": DRAINAGE_LAYER_VISUALS.orifices.hitWidth,
      "line-opacity": 0
    }
  },
  {
    id: "pumps-hit",
    type: "line",
    source: "pumps",
    "source-layer": SOURCE_LAYERS.pumps,
    minzoom: DRAINAGE_LAYER_VISUALS.pumps.minzoom,
    paint: {
      "line-color": "#000000",
      "line-width": DRAINAGE_LAYER_VISUALS.pumps.hitWidth,
      "line-opacity": 0
    }
  },
  {
    id: "outfalls-hit",
    type: "circle",
    source: "outfalls",
    "source-layer": SOURCE_LAYERS.outfalls,
    minzoom: DRAINAGE_LAYER_VISUALS.outfalls.minzoom,
    paint: {
      "circle-color": "#000000",
      "circle-radius": DRAINAGE_LAYER_VISUALS.outfalls.hitRadius,
      "circle-opacity": 0
    }
  }
];