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

export const WATER_NETWORK_GLOBAL_VIEW = {
  bbox3857: [
    13508802,
    3608164,
    13555651,
    3633686
  ]
} as const;

export const SOURCE_LAYERS = {
  pipes: "geo_pipes_mat",
  junctions: "geo_junctions_mat"
} as const;

export function createWaterNetworkSources() {
  return {
    pipes: {
      type: "vector" as const,
      tiles: [
        "https://geoserver.waternetwork.cn/geoserver/gwc/service/wmts/rest/tjwater:geo_pipes_mat/line/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile"
      ],
      minzoom: 0,
      maxzoom: 24
    },
    junctions: {
      type: "vector" as const,
      tiles: [
        "https://geoserver.waternetwork.cn/geoserver/gwc/service/wmts/rest/tjwater:geo_junctions_mat/generic/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox-vector-tile"
      ],
      minzoom: 0,
      maxzoom: 24
    }
  };
}

export function createBaseStyle(mapboxToken?: string): StyleSpecification {
  const sources: StyleSpecification["sources"] = {};
  const layers: StyleSpecification["layers"] = [
    {
      id: "background",
      type: "background",
      paint: {
        "background-color": "#eef3f7"
      }
    }
  ];

  if (mapboxToken) {
    sources["mapbox-light"] = {
      type: "raster",
      tiles: [
        `https://api.mapbox.com/styles/v1/mapbox/light-v11/tiles/512/{z}/{x}/{y}@2x?access_token=${mapboxToken}`
      ],
      tileSize: 512,
      attribution:
        '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    };
    sources["mapbox-satellite"] = {
      type: "raster",
      tiles: [
        `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/tiles/512/{z}/{x}/{y}@2x?access_token=${mapboxToken}`
      ],
      tileSize: 512,
      attribution:
        '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    };

    layers.push({
      id: "mapbox-light",
      type: "raster",
      source: "mapbox-light",
      paint: {
        "raster-opacity": 0.82,
        "raster-saturation": -0.22,
        "raster-contrast": 0.04
      }
    });
    layers.push({
      id: "mapbox-satellite",
      type: "raster",
      source: "mapbox-satellite",
      layout: {
        visibility: "none"
      },
      paint: {
        "raster-opacity": 0.86,
        "raster-saturation": -0.16,
        "raster-contrast": 0.02
      }
    });
  }

  return {
    version: 8,
    glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
    sources,
    layers
  };
}