import type { StyleSpecification } from "maplibre-gl";

type LayerSpecification = StyleSpecification["layers"][number];
type LineLayerSpecification = Extract<LayerSpecification, { type: "line" }>;
type CircleLayerSpecification = Extract<LayerSpecification, { type: "circle" }>;
type LineWidth = NonNullable<LineLayerSpecification["paint"]>["line-width"];
type CircleRadius = NonNullable<CircleLayerSpecification["paint"]>["circle-radius"];

export const MAP_MAX_ZOOM = 24;

const lineHitWidth = [
  "interpolate",
  ["linear"],
  ["zoom"],
  11,
  16,
  17,
  18,
  22,
  22,
  24,
  24
] as LineWidth;

const pointHitRadius = [
  "interpolate",
  ["linear"],
  ["zoom"],
  12,
  9,
  16,
  10,
  20,
  12,
  24,
  14
] as CircleRadius;

export const DRAINAGE_LAYER_VISUALS = {
  conduits: {
    minzoom: 9,
    casingWidth: [
      "interpolate", ["linear"], ["zoom"],
      9, 1.8,
      13, 3,
      17, ["+", 4.5, ["/", ["coalesce", ["get", "diameter"], 100], 300]],
      22, ["+", 6, ["/", ["coalesce", ["get", "diameter"], 100], 260]],
      24, ["+", 7, ["/", ["coalesce", ["get", "diameter"], 100], 240]]
    ] as LineWidth,
    width: [
      "interpolate", ["linear"], ["zoom"],
      9, 0.9,
      13, 1.8,
      17, ["+", 2.5, ["/", ["coalesce", ["get", "diameter"], 100], 360]],
      22, ["+", 3.5, ["/", ["coalesce", ["get", "diameter"], 100], 300]],
      24, ["+", 4, ["/", ["coalesce", ["get", "diameter"], 100], 280]]
    ] as LineWidth,
    riskGlowWidth: ["interpolate", ["linear"], ["zoom"], 12, 2.6, 17, 7.5, 22, 9.5, 24, 11] as LineWidth,
    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 9, 5.5, 13, 8, 17, 12.5, 22, 15, 24, 17] as LineWidth,
    hoverWidth: ["interpolate", ["linear"], ["zoom"], 9, 3, 13, 5.2, 17, 9, 22, 11.5, 24, 13] as LineWidth,
    selectedHaloWidth: ["interpolate", ["linear"], ["zoom"], 9, 7, 13, 10, 17, 14.5, 22, 17.5, 24, 20] as LineWidth,
    selectedOutlineWidth: ["interpolate", ["linear"], ["zoom"], 9, 5.5, 13, 8.2, 17, 12.5, 22, 15.5, 24, 18] as LineWidth,
    selectedWidth: ["interpolate", ["linear"], ["zoom"], 9, 4, 13, 6.5, 17, 10.5, 22, 13.5, 24, 16] as LineWidth,
    hitWidth: lineHitWidth
  },
  junctions: {
    minzoom: 12,
    haloRadius: ["interpolate", ["linear"], ["zoom"], 12, 2.5, 16, 4.5, 20, 7, 24, 9.5] as CircleRadius,
    radius: ["interpolate", ["linear"], ["zoom"], 12, 1, 16, 3, 20, 5.5, 24, 8] as CircleRadius,
    hoverRadius: ["interpolate", ["linear"], ["zoom"], 12, 5, 16, 7, 20, 10, 24, 12] as CircleRadius,
    selectedHaloRadius: ["interpolate", ["linear"], ["zoom"], 12, 10.5, 16, 12.5, 20, 15.5, 24, 18] as CircleRadius,
    selectedRadius: ["interpolate", ["linear"], ["zoom"], 12, 5.5, 16, 7.5, 20, 10.5, 24, 13] as CircleRadius,
    hitRadius: pointHitRadius
  },
  orifices: {
    minzoom: 11,
    casingWidth: ["interpolate", ["linear"], ["zoom"], 11, 3.2, 17, 7.5, 22, 9, 24, 10] as LineWidth,
    width: ["interpolate", ["linear"], ["zoom"], 11, 1.6, 17, 4.5, 22, 6, 24, 7] as LineWidth,
    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 6, 17, 10.5, 22, 12.5, 24, 14] as LineWidth,
    hoverWidth: ["interpolate", ["linear"], ["zoom"], 11, 4, 17, 7, 22, 9, 24, 10.5] as LineWidth,
    selectedHaloWidth: ["interpolate", ["linear"], ["zoom"], 11, 8, 17, 13, 22, 16, 24, 18] as LineWidth,
    selectedOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 6.75, 17, 11, 22, 14, 24, 16] as LineWidth,
    selectedWidth: ["interpolate", ["linear"], ["zoom"], 11, 5.5, 17, 9, 22, 12, 24, 14] as LineWidth,
    hitWidth: lineHitWidth
  },
  pumps: {
    minzoom: 11,
    casingWidth: ["interpolate", ["linear"], ["zoom"], 11, 4, 17, 9.5, 22, 11, 24, 12] as LineWidth,
    width: ["interpolate", ["linear"], ["zoom"], 11, 2.4, 17, 6.2, 22, 8, 24, 9] as LineWidth,
    hoverOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 7, 17, 12, 22, 14, 24, 16] as LineWidth,
    hoverWidth: ["interpolate", ["linear"], ["zoom"], 11, 4.5, 17, 8.5, 22, 10.5, 24, 12] as LineWidth,
    selectedHaloWidth: ["interpolate", ["linear"], ["zoom"], 11, 9, 17, 14, 22, 17, 24, 19] as LineWidth,
    selectedOutlineWidth: ["interpolate", ["linear"], ["zoom"], 11, 7.5, 17, 12, 22, 15, 24, 17] as LineWidth,
    selectedWidth: ["interpolate", ["linear"], ["zoom"], 11, 6, 17, 10, 22, 13, 24, 15] as LineWidth,
    hitWidth: lineHitWidth
  },
  outfalls: {
    minzoom: 11,
    haloRadius: ["interpolate", ["linear"], ["zoom"], 11, 5, 16, 7, 20, 9, 24, 11] as CircleRadius,
    radius: ["interpolate", ["linear"], ["zoom"], 11, 3, 16, 5, 20, 7, 24, 9] as CircleRadius,
    hoverRadius: ["interpolate", ["linear"], ["zoom"], 11, 6, 16, 8, 20, 11, 24, 13] as CircleRadius,
    selectedHaloRadius: ["interpolate", ["linear"], ["zoom"], 11, 12.5, 16, 14.5, 20, 17.5, 24, 20] as CircleRadius,
    selectedRadius: ["interpolate", ["linear"], ["zoom"], 11, 7.5, 16, 9.5, 20, 12.5, 24, 15] as CircleRadius,
    hitRadius: pointHitRadius
  }
} as const;