import type L from 'leaflet'
import { GridCoordLayer, HnHCRS, HnHMaxZoom, HnHMinZoom, TileSize } from '~/lib/LeafletCustomTypes'
import type { GridCoordLayerOptions } from '~/lib/LeafletCustomTypes'
import { SmartTileLayer } from '~/lib/SmartTileLayer'
import type { MapInfo } from '~/types/api'

type SmartTileLayerInstance = InstanceType<typeof SmartTileLayer>

export interface MapInitResult {
  map: L.Map
  layer: SmartTileLayerInstance
  overlayLayer: SmartTileLayerInstance
  coordLayer: L.GridLayer
  markerLayer: L.LayerGroup
  backendBase: string
}

export async function initLeafletMap(
  element: HTMLElement,
  mapsList: MapInfo[],
  initialMapId: number
): Promise<MapInitResult> {
  const L = (await import('leaflet')).default

  const map = L.map(element, {
    minZoom: HnHMinZoom,
    maxZoom: HnHMaxZoom,
    crs: HnHCRS,
    attributionControl: false,
    zoomControl: false,
    inertia: true,
    zoomAnimation: true,
    fadeAnimation: true,
    markerZoomAnimation: true,
  })

  const runtimeConfig = useRuntimeConfig()
  const apiBase = (runtimeConfig.public.apiBase as string) ?? '/map/api'
  const backendBase = apiBase.replace(/\/api\/?$/, '') || '/map'
  const tileUrl = `${backendBase}/grids/{map}/{z}/{x}_{y}.png?{cache}`

  const layer = new SmartTileLayer(tileUrl, {
    minZoom: 1,
    maxZoom: 6,
    zoomOffset: 0,
    zoomReverse: true,
    tileSize: TileSize,
    updateWhenIdle: true,
    keepBuffer: 2,
  })
  layer.map = initialMapId
  layer.invalidTile =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII='
  layer.addTo(map)

  const overlayLayer = new SmartTileLayer(tileUrl, {
    minZoom: 1,
    maxZoom: 6,
    zoomOffset: 0,
    zoomReverse: true,
    tileSize: TileSize,
    opacity: 0.5,
    updateWhenIdle: true,
    keepBuffer: 2,
  })
  overlayLayer.map = -1
  overlayLayer.invalidTile =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
  overlayLayer.addTo(map)

  const coordLayer = new GridCoordLayer({
    tileSize: TileSize,
    minZoom: HnHMinZoom,
    maxZoom: HnHMaxZoom,
    opacity: 0,
    visible: false,
    pane: 'tilePane',
  } as GridCoordLayerOptions)
  coordLayer.addTo(map)
  coordLayer.setZIndex(500)

  const markerLayer = L.layerGroup()
  markerLayer.addTo(map)
  markerLayer.setZIndex(600)

  const baseURL = useRuntimeConfig().app.baseURL ?? '/'
  const markerIconPath = baseURL.endsWith('/') ? baseURL : baseURL + '/'
  L.Icon.Default.imagePath = markerIconPath

  return { map, layer, overlayLayer, coordLayer, markerLayer, backendBase }
}