/***********************************************************************
 * Copyright © 2024 Guilhem Moulin <info@guilhem.se>
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Affero General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 **********************************************************************/

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';

import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

import FullScreen from 'ol/control/FullScreen.js';
import ScaleLine from 'ol/control/ScaleLine.js';
import Zoom from 'ol/control/Zoom.js';
import ZoomSlider from 'ol/control/ZoomSlider.js';

import Overlay from 'ol/Overlay.js';

import MVT from 'ol/format/MVT.js';
import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorTile from 'ol/source/VectorTile.js';
import {createXYZ} from 'ol/tilegrid.js';

import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill.js';
import RegularShape from 'ol/style/RegularShape.js';
import Stroke from 'ol/style/Stroke.js';
import Style from 'ol/style/Style.js';

import proj4 from 'proj4';
import { get as getProjection } from 'ol/proj.js';
import { register as registerProjection } from 'ol/proj/proj4.js';

import { Modal, Popover } from 'bootstrap';

import './style.css';


proj4.defs('EPSG:3006', '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');
registerProjection(proj4);
const projection = getProjection('EPSG:3006');


/* Lantmäteriet uses a tile-scheme where the origin (top-left corner) is
 * at N8500000 E-1200000 (SWEREF99 TM), where each tile is 256x256
 * pixels, and where the resolution at level 0 is 4096m per pixel
 * (each side is 1048.576km long).
 *
 *     https://www.lantmateriet.se/globalassets/geodata/geodatatjanster/tb_twk_visning_cache_v1.1.0.pdf
 *     https://www.lantmateriet.se/globalassets/geodata/geodatatjanster/tb_twk_visning-oversiktlig_v1.0.3.pdf
 *
 * We set the extent to a 4x4 tiles square at level 2 (1024px =
 * 1048.576km per side) somehow centered on Norrbotten and Västerbotten,
 * and zoom in from there.  This represent a TILEROW (x) offset of 5,
 * and a TILECOL (y) offset of 2.
 */
const extent = [110720, 6927136, 1159296, 7975712];

/* XXX using the topowebbcache WMTS is fine for testing (as it
 * doesn't require authentication) but not in production in a public
 * instance as doing so would violate its current terms of use (as
 * of January 2024 it's not CC0 open data).  See
 *
 *   https://www.lantmateriet.se/sv/om-lantmateriet/Rattsinformation/upphovsratt-och-publicering-av-lantmateriets-geografiska-information/
 *   https://www.lantmateriet.se/sv/kartor/vara-karttjanster/min-karta/#anchor-2
 *   https://help.locusmap.eu/topic/support-for-swedish-lantmateriets-min-karta-wms
 *
 *  More precise background maps might be available in the future
 *  as open data, though:
 *
 *    https://www.lantmateriet.se/sv/om-lantmateriet/press/nyheter/lantmateriets-arbete-mot-oppna-data-i-full-gang/
 */
const baseMapSource = new WMTS({
  // XXX the 'layer' parameter should be passed in the options
  // dictionary (like style and version), but there is no setLayer()
  // method to switch from/to the toned down map
  url: 'https://minkarta.lantmateriet.se/map/topowebbcache?layer=topowebb',
  version: '1.0.0',
  style: 'default',
  matrixSet: '3006',
  format: 'image/png',
  tileGrid: new WMTSTileGrid({
    extent: extent,
    // https://www.lantmateriet.se/globalassets/geodata/geodatatjanster/tb_twk_visning-oversiktlig_v1.0.3.pdf
    tileSize: 256,
    origin: [-1200000, 8500000],
    resolutions: [4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8],
    matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  }),
  projection: projection,
  wrapX: false,
  crossOrigin: 'anonymous',
});


const view = new View({
  projection: projection,
  extent: extent,
  showFullExtent: true,
  /* center of the bbox of the Norrbotten and Västerbotten geometries */
  center: [694767.48, 7338176.57],
  zoom: 1,
  enableRotation: false,
  resolutions: [1024, 512, 256, 128, 64, 32, 16, 8],
  constrainResolution: false,
});

(function() {
  const params = new URLSearchParams(window.location.hash.substring(1));
  const x = parseFloat(params.get('x'));
  const y = parseFloat(params.get('y'));
  if (!isNaN(x) && !isNaN(y)) {
    view.setCenter([x, y]);
  }
  const z = parseFloat(params.get('z'));
  if (!isNaN(z)) {
    view.setZoom(z);
  }
})();


const map = new Map({
  controls: [],
  view: view,
  layers: [
    new TileLayer({
      source: baseMapSource
    }),
  ],
  target: document.getElementById('map'),
});
const popup = document.getElementById('popup');

/* move the control container to the viewport */
const container = document.getElementById('map-control-container');
(function() {
  const container0 = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0];
  container0.appendChild(container);
  container0.appendChild(document.getElementById('modal-info'));

  const backdrop = document.createElement('div');
  container0.appendChild(backdrop);
  backdrop.id = 'modal-info-backdrop';
})();

/* zoom in/out */
(function() {
  const zoomInLabel = document.createElement('i');
  zoomInLabel.classList.add('bi', 'bi-plus');

  const zoomOutLabel = document.createElement('i');
  zoomOutLabel.classList.add('bi', 'bi-dash');

  const control = new Zoom({
    zoomInTipLabel: 'Zooma in',
    zoomInLabel: zoomInLabel,
    zoomOutTipLabel: 'Zooma ut',
    zoomOutLabel: zoomOutLabel,
    target: document.getElementById('zoom-control'),
  });

  control.element.classList.add('btn-group-vertical');
  for (const btn of control.element.getElementsByTagName('button')) {
    btn.classList.add('btn', 'btn-light');
  }
  map.addControl(control);
})();

/* zoom slider */
(function() {
  const control = new ZoomSlider({
    target: document.getElementById('zoom-control'),
  });
  control.element.classList.add('modal');
  for (const btn of control.element.getElementsByTagName('button')) {
    btn.classList.add('btn', 'btn-light');
  }
  map.addControl(control);
})();

/* scale line */
(function() {
  const size = map.getSize();
  const control = new ScaleLine({
    units: 'metric',
    minWidth: 150,
    maxWidth: size[1] < 350 ? size[1] - 50 : 350,
    target: container,
  });
  control.element.classList.add('modal', 'modal-content');
  map.addControl(control);
})();

const menu = document.getElementById('map-menu');
const TRAILING_ZEROES = /\.?0*$/;

/* "open in new tab" button */
if (window.location !== window.parent.location) {
  const div = document.createElement('div');
  menu.appendChild(div);
  div.classList.add('ol-unselectable', 'ol-control');

  const btn = document.createElement('button');
  div.appendChild(btn);
  btn.type = 'button';
  btn.setAttribute('aria-expanded', 'false');
  btn.title = 'Öppna karta i ny flik';
  btn.classList.add('btn', 'btn-light');

  const i = document.createElement('i');
  btn.appendChild(i);
  i.classList.add('bi', 'bi-box-arrow-up-right');

  btn.onclick = function(event) {
    const coordinates = view.getCenter();
    const url = new URL(window.location.href);
    const searchParams = new URLSearchParams(url.hash.substring(1));
    searchParams.set('x', coordinates[0].toFixed(2).replace(TRAILING_ZEROES, ''));
    searchParams.set('y', coordinates[1].toFixed(2).replace(TRAILING_ZEROES, ''));
    searchParams.set('z', view.getZoom().toFixed(3).replace(TRAILING_ZEROES, ''));
    url.hash = '#' + searchParams.toString();
    return window.open(url.href, '_blank');
  };
}

/* layer selection button and legend */
(function() {
  const btn = (function() {
    const div = document.createElement('div');
    menu.appendChild(div);
    div.id = 'layer-selection-button';
    div.classList.add('ol-unselectable', 'ol-control');

    const btn = document.createElement('button');
    div.appendChild(btn);
    btn.type = 'button';
    btn.setAttribute('aria-expanded', 'false');
    btn.title = 'Lagerval';
    btn.classList.add('btn', 'btn-light');

    const i = document.createElement('i');
    btn.appendChild(i);
    i.classList.add('bi', 'bi-stack');

    return btn;
  })();

  const btn2 = (function() {
    const div = document.createElement('div');
    menu.appendChild(div);
    div.id = 'map-legend-button';
    div.classList.add('ol-unselectable', 'ol-control');

    const btn = document.createElement('button');
    div.appendChild(btn);
    btn.type = 'button';
    btn.setAttribute('aria-expanded', 'false');
    btn.title = 'Byt kartlager';
    btn.title = 'Teckenförklaring';
    btn.classList.add('btn', 'btn-light');

    const i = document.createElement('i');
    btn.appendChild(i);
    i.classList.add('bi', 'bi-list-task');

    return btn;
  })();

  const panel = document.getElementById('layer-selection-panel');
  btn.onclick = function(event) {
    if (btn.getAttribute('aria-expanded') === 'true') {
      panel.setAttribute('aria-hidden', 'true');
      btn.setAttribute('aria-expanded', 'false');
      btn.classList.replace('btn-dark', 'btn-light');
    } else {
      if (btn2.getAttribute('aria-expanded') === 'true') {
        btn2.click();
      }
      panel.setAttribute('aria-hidden', 'false');
      btn.setAttribute('aria-expanded', 'true');
      btn.classList.replace('btn-light', 'btn-dark');
    }
  };

  const panel2 = document.getElementById('map-legend-panel');
  btn2.onclick = function(event) {
    if (btn2.getAttribute('aria-expanded') === 'true') {
      panel2.setAttribute('aria-hidden', 'true');
      btn2.setAttribute('aria-expanded', 'false');
      btn2.classList.replace('btn-dark', 'btn-light');
    } else {
      if (btn.getAttribute('aria-expanded') === 'true') {
        btn.click();
      }
      panel2.setAttribute('aria-hidden', 'false');
      btn2.setAttribute('aria-expanded', 'true');
      btn2.classList.replace('btn-light', 'btn-dark');
    }
  };
})();

/* fullscreen control */
(function() {
  const label = document.createElement('i');
  label.classList.add('bi', 'bi-fullscreen');

  const labelActive = document.createElement('i');
  labelActive.classList.add('bi', 'bi-fullscreen-exit');

  const titleInactive = 'Helskärmsläge';
  const titleActive = 'Lämna helskärmsläge';
  const classInactive = 'btn-light';
  const classActive = 'btn-dark';

  const control = new FullScreen({
    label: label,
    labelActive: labelActive,
    tipLabel: titleInactive,
    keys: true,
    target: menu,
  })
  control.element.getElementsByTagName('button')[0].classList.add('btn', classInactive);
  map.addControl(control);

  control.addEventListener('enterfullscreen', function() {
    const btn = control.element.getElementsByTagName('button')[0];
    btn.classList.replace(classInactive, classActive);
    btn.title = titleActive;

    const exp = document.getElementById('export-to-image');
    if (exp !== undefined) {
      /* hide export button in fullscreen mode as it exits it */
      exp.classList.add('d-none');
    }
  })
  control.addEventListener('leavefullscreen', function() {
    const popover = Popover.getInstance(popup);
    if (popover !== null) {
      /* dispose popover as is might overflow the viewport */
      popover.dispose();
    }

    const btn = control.element.getElementsByTagName('button')[0];
    btn.classList.replace(classActive, classInactive);
    btn.title = titleInactive;

    const exp = document.getElementById('export-to-image');
    if (exp !== undefined) {
      exp.classList.remove('d-none');
    }
  })
})();

/* export/download button */
(function() {
  const div = document.createElement('div');
  div.classList.add('ol-unselectable', 'ol-control');
  div.id = 'export-to-image';

  const btn = document.createElement('button');
  div.appendChild(btn);
  btn.classList.add('btn', 'btn-light');
  btn.type = 'button';
  btn.title = 'Ladda ner som en PNG-fil';

  const i = document.createElement('i');
  btn.appendChild(i);
  i.classList.add('bi', 'bi-download');
  menu.appendChild(div);

  btn.onclick = function(event) {
    map.once('rendercomplete', function() {
      const canvas0 = document.createElement('canvas');
      const size = map.getSize();
      canvas0.width = size[0];
      canvas0.height = size[1];

      const context = canvas0.getContext('2d');
      map.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer').forEach(function(canvas) {
        if (canvas.width > 0) {
          const opacity = canvas.parentNode.style.opacity || canvas.style.opacity;
          context.globalAlpha = opacity === '' ? 1 : Number(opacity);
          context.drawImage(canvas, 0, 0);
        }
      });

      context.globalAlpha = 1;
      context.setTransform(1, 0, 0, 1, 0, 0);

      canvas0.toBlob(function(blob) {
        const a = document.createElement('a');
        a.download = 'karta.png';
        a.rel = 'noopener';
        a.href = URL.createObjectURL(blob);
        setTimeout(function() { URL.revokeObjectURL(a.href) }, 4E4); // 40s
        setTimeout(function() { a.click() }, 0);
      });
    });

    map.renderSync();
  };
})();

/* info button */
(function() {
  const div = document.createElement('div');
  menu.appendChild(div);
  div.id = 'info-button';
  div.classList.add('ol-unselectable', 'ol-control');

  const btn = document.createElement('button');
  div.appendChild(btn);
  btn.type = 'button';
  btn.setAttribute('aria-expanded', 'false');
  btn.title = 'Visa information';
  btn.classList.add('btn', 'btn-light');

  const i = document.createElement('i');
  btn.appendChild(i);
  i.classList.add('bi', 'bi-info-lg');

  const panel = document.getElementById('modal-info');
  const modal = new Modal(panel, {
    backdrop: false,
  });

  const backdrop = document.getElementById('modal-info-backdrop');
  backdrop.onclick = function(event) {
    modal.hide();
  };

  panel.addEventListener('show.bs.modal', function() {
    backdrop.classList.add('modal-backdrop', 'show');
    btn.setAttribute('aria-expanded', 'true');
    btn.classList.replace('btn-light', 'btn-dark');
  });
  panel.addEventListener('hidden.bs.modal', function() {
    btn.classList.replace('btn-dark', 'btn-light');
    btn.setAttribute('aria-expanded', 'false');
    backdrop.classList.remove('modal-backdrop', 'show');
  });

  btn.onclick = function(event) {
    modal.toggle();
  };
})();

/* we're all set, show the control container now */
container.setAttribute('aria-hidden', 'false');

view.on('change', function(event) {
    const popover = Popover.getInstance(popup);
    if (popover !== null) {
      popover.dispose();
    }

    const coordinates = view.getCenter();
    const searchParams = new URLSearchParams(location.hash.substring(1));
    searchParams.set('x', coordinates[0].toFixed(2).replace(TRAILING_ZEROES, ''));
    searchParams.set('y', coordinates[1].toFixed(2).replace(TRAILING_ZEROES, ''));
    searchParams.set('z', view.getZoom().toFixed(3).replace(TRAILING_ZEROES, ''));
    location.hash = '#' + searchParams.toString();
});


const layers = {
  svk_lines: {
    popoverTitle: 'Kraftledning (befintlig)',
    popover: [
      ['Förläggn', 'FÖRLÄGGN'],
      ['Spänning', 'SPÄNNING', { fn: (v) => v + '\u202FkV' }],
    ],
    style: [1, 1.5, 2, 2, 2, 2, 3, 4, 5, 6, 8, 10].map(function(width) {
        return new Style({
          zIndex: 2,
          stroke: new Stroke({
            color: 'black',
            width: width,
          }),
        });
      }),
  },
  svk_pylons: {
    style: [undefined, undefined, undefined, undefined, undefined]
      .concat([3, 4, 5, 6, 8, 10, 15].map(function(radius) {
          return new Style({
            zIndex: 1,
            image: new CircleStyle({
              radius: radius,
              fill: new Fill({
                color: 'black',
              }),
            }),
          });
      })),
  },
  svk_stations: {
    style: [5, 6, 8, 8, 10, 12, 12].map(function(radius) {
        return new Style({
          zIndex: 0,
          image: new RegularShape({
            radius: radius,
            points: 4,
            angle: Math.PI/4,
            fill: new Fill({
              color: 'black',
            }),
          }),
        });
      })
      .concat([.5, 1, 1.5, 2, 2].map(function(width) {
        return new Style({
          zIndex: 0,
          fill: new Fill({
            color: 'rgba(128, 128, 128, .7)',
          }),
          stroke: new Stroke({
            width: width,
            color: 'rgb(0, 0, 0)',
          }),
        });
      })),
  },
};

const layerHierarchy = [
  {
    text: 'Transmissionsnät för el',
    children: [
      {
        text: 'Kraftledningar',
        layer: ['svk_lines', 'svk_pylons'],
      },
      {
        text: 'Stationer',
        layer: 'svk_stations',
      },
    ],
  },
];

const vectorSource = new VectorTile({
  url: '/public/xyztiles/{z}/{x}/{y}.pbf',
  format: new MVT({
    layers: Object.keys(layers),
  }),
  projection: projection,
  wrapX: false,
  transition: 0,
  tileGrid: createXYZ({
    extent: extent,
    tileSize: 1024,
    maxResolution: 1024, /* = 1048576/1024 */
    minZoom: 0,
    maxZoom: 9,
  }),
});

const styles = Object.keys(layers).reduce(function(result, key) {
  result[key] = layers[key].style;
  return result;
}, {});
map.addLayer(new VectorTileLayer({
  source: vectorSource,
  /* XXX switch to 'hybrid' if there are perf issues; but that seems to
   * put lines above points regardless of their respective z-index */
  renderMode: 'vector',
  declutter: false,
  style: function(feature, resolution) {
    const style = styles[feature.getProperties().layer];
    if (!Array.isArray(style)) {
      return style;
    } else {
      const maxi = style.length - 1;
      const z = 10 /* Math.log2(maxResolution) */ - Math.log2(resolution);
      /* use Math.floor() as VectorTile.js calls getZForResolution(resolution, 1) */
      const i = z <= 0 ? 0 : z >= maxi ? maxi : Math.floor(z);
      // console.log(`resolution=${resolution}, z=${z}, i=${i}`);
      return style[i];
    }
  },
}));

/* layer selection panel */
(function() {
  const modal = document.getElementById('layer-selection-panel');
  modal.classList.add('modal');
  modal.setAttribute('role', 'dialog');
  modal.setAttribute('aria-hidden', 'true');

  const content = document.createElement('div');
  modal.appendChild(content);
  content.classList.add('modal-content');

  const body = document.createElement('div');
  content.appendChild(body);
  body.classList.add('modal-body');

  const accordion = document.createElement('div');
  body.appendChild(accordion);
  accordion.id = 'layer-selection-accordion';
  accordion.classList.add('accordion', 'accordion-flush');

  (function collectLayers(list) {
    list.forEach(function(elem) {
      elem._layers = elem.layer === undefined ? []
                   : Array.isArray(elem.layer) ? elem.layer
                   : [elem.layer];
      if (elem.children !== undefined && elem.children.length > 0) {
        collectLayers(elem.children);
        elem.children.forEach(function(child) {
          child._layers.forEach((l) => elem._layers.push(l));
        });
      }
    });
  })(layerHierarchy);

  const setIndeterminateAndChecked = function(list) {
    return list.forEach(function(elem) {
      const layerStyles = elem._layers.map((lyr) => styles[lyr] !== undefined);
      elem._input.indeterminate = elem._layers.length <= 1 ? false
                                : layerStyles.slice(1).some((v) => v !== layerStyles[0]);
      if (!elem._input.indeterminate) {
        /* keep checked value if indeterminate */
        elem._input.checked = layerStyles.every((v) => v);
      }
      if (elem.children !== undefined && elem.children.length > 0) {
        setIndeterminateAndChecked(elem.children);
      }
    });
  };
  const onClickFunction = function(layerList, event) {
    layerList.forEach(function(lyr) {
      if (event.target.checked) {
        styles[lyr] = layers[lyr].style;
      } else {
        delete styles[lyr];
      }
    });
    setIndeterminateAndChecked(layerHierarchy);
    vectorSource.changed();
  };

  let layerId = 0;
  const addAccordionGroup = function(parentNode, children) {
    const ul = document.createElement('ul');
    parentNode.appendChild(ul);
    ul.classList.add('list-group', 'list-group-flush');

    children.forEach(function(child) {
      const li = document.createElement('li');
      ul.appendChild(li);
      li.classList.add('list-group-item');

      const div = document.createElement('div');
      li.appendChild(div);
      div.classList.add('d-inline-flex');

      const input = child._input = document.createElement('input');
      div.appendChild(input);
      input.classList.add('form-check-input');
      input.type = 'checkbox';
      input.id = 'layer' + layerId++;

      const label = document.createElement('label');
      div.appendChild(label);
      label.classList.add('form-check-label');
      label.setAttribute('for', input.id);

      const textNode = document.createTextNode(child.text);
      label.appendChild(textNode);

      if (child.children !== undefined && child.children.length > 0) {
        addAccordionGroup(li, child.children);
      }

      input.onclick = function(event) {
        return onClickFunction(child._layers, event);
      };
    });
  };
  layerHierarchy.forEach(function(x, idx) {
    const item = document.createElement('div');
    accordion.appendChild(item);
    item.classList.add('accordion-item');

    const header = document.createElement('div');
    item.appendChild(header);
    header.classList.add('accordion-header');

    const btn = document.createElement('button');
    header.appendChild(btn);

    const collapse = document.createElement('div');
    item.appendChild(collapse);
    collapse.id = 'accordion-collapse-' + idx;
    collapse.classList.add('accordion-collapse', 'collapse');
    // collapse.setAttribute('data-bs-parent', '#' + accordion.id);

    btn.type = 'button';
    btn.setAttribute('data-bs-toggle', 'collapse');
    btn.setAttribute('data-bs-target', '#' + collapse.id);
    btn.setAttribute('aria-expanded', 'false');
    btn.setAttribute('aria-controls', collapse.id);
    btn.classList.add('accordion-button', 'collapsed');

    const span0 = document.createElement('span');
    btn.appendChild(span0);
    span0.classList.add('form-check');
    span0.setAttribute('data-bs-toggle', 'collapse');
    span0.setAttribute('data-bs-target', '');

    const input0 = x._input = document.createElement('input');
    span0.appendChild(input0);
    input0.classList.add('form-check-input');
    input0.type = 'checkbox';
    input0.id = 'layer' + layerId++;

    const label0 = document.createElement('label');
    span0.appendChild(label0);
    label0.classList.add('form-check-label');
    label0.setAttribute('for', input0.id);

    const text0 = document.createTextNode(x.text);
    label0.appendChild(text0);

    const body = document.createElement('div');
    collapse.appendChild(body);
    body.classList.add('accordion-body');

    addAccordionGroup(body, x.children);

    input0.onclick = function(event) {
      return onClickFunction(x._layers, event);
    };
  });
  setIndeterminateAndChecked(layerHierarchy);

  (function() {
    const item = document.createElement('div');
    accordion.appendChild(item);
    item.classList.add('accordion-item');

    const div = document.createElement('div');
    item.appendChild(div);
    div.classList.add('form-check', 'form-switch');

    const input = document.createElement('input');
    div.appendChild(input);
    input.classList.add('form-check-input');
    input.type = 'checkbox';
    input.setAttribute('role', 'switch');
    input.id = 'layer' + layerId++;

    const label = document.createElement('label');
    div.appendChild(label);
    label.classList.add('form-check-label');
    label.setAttribute('for', input.id);
    label.innerHTML = 'Nedtonad bakgrund karta';

    input.onchange = function(event) {
      const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb';
      baseMapSource.setUrl('https://minkarta.lantmateriet.se/map/topowebbcache?LAYER=' + layer);
    };
  })();
})();

/* legend panel */
(function() {
  const modal = document.getElementById('map-legend-panel');
  modal.classList.add('modal');
  modal.setAttribute('role', 'dialog');
  modal.setAttribute('aria-hidden', 'true');

  const content = document.createElement('div');
  modal.appendChild(content);
  content.classList.add('modal-content');

  const body = document.createElement('div');
  content.appendChild(body);
  body.classList.add('modal-body');
  body.innerHTML = 'legend TODO';
})();

/* popup overlay */
(function() {
  const popupOverlay = new Overlay({
    stopEvent: true,
    element: popup,
  });

  map.addOverlay(popupOverlay);
  const features = [];
  let popover, featureNum = 0;

  const header = document.createElement('div');
  header.classList.add('d-flex');

  const pageNode = document.createElement('div');
  pageNode.classList.add('flex-grow-1', 'pe-4');
  header.appendChild(pageNode);

  const pageNum = document.createElement('span');
  const pageCount = document.createElement('span');
  pageNode.appendChild(document.createTextNode('Träff '));
  pageNode.appendChild(pageNum);
  pageNode.appendChild(document.createTextNode(' av '));
  pageNode.appendChild(pageCount);

  const onClickPageChange = function(event, offset) {
    const btn = event.target;
    if (btn.classList.contains('disabled') || popover === null || popover.tip === null) {
      return;
    }
    if (featureNum + offset < 0 || featureNum + offset > features.length - 1) {
      return;
    }

    featureNum += offset;
    if (featureNum < 1) {
      btnPrev.classList.add('disabled');
    } else {
      btnPrev.classList.remove('disabled');
    }
    if (featureNum < features.length - 1) {
      btnNext.classList.remove('disabled');
    } else {
      btnNext.classList.add('disabled');
    }

    pageNum.innerHTML = (featureNum + 1).toString();
    popover.tip.getElementsByClassName('popover-body')[0].replaceChildren(features[featureNum]);
    setTimeout(function() { btn.blur() }, 100);
  };

  const btnPrev = document.createElement('button');
  btnPrev.classList.add('popover-button', 'popover-button-prev');
  btnPrev.setAttribute('type', 'button');
  btnPrev.title = 'Föregående träff';
  btnPrev.onclick = function(event) {
    return onClickPageChange(event, -1);
  };

  const btnNext = document.createElement('button');
  btnNext.classList.add('popover-button', 'popover-button-next');
  btnNext.setAttribute('type', 'button');
  btnNext.title = 'Nästa träff';
  btnNext.onclick = function(event) {
    return onClickPageChange(event, +1);
  };

  const btnClose = document.createElement('button');
  btnClose.classList.add('popover-button', 'popover-button-close');
  btnClose.setAttribute('type', 'button');
  btnClose.title = 'Stäng';
  btnClose.onclick = function(event) {
    if (popover !== null) {
      popover.dispose();
    }
  };

  header.appendChild(btnPrev);
  header.appendChild(btnNext);
  header.appendChild(btnClose);

  const container0 = map.getViewport().querySelector('.ol-overlay-container.ol-selectable');
  map.on('singleclick', function(event) {
    /* clear the features list */
    features.length = 0;
    featureNum = 0;

    /* dispose any pre-existing popover */
    popover = Popover.getInstance(popup);
    if (popover !== null) {
      popover.dispose();
    }

    const size = map.getSize();
    if (size[0] < 576 || size[1] < 576) {
      return;
    }

    /* unclear how many feature we'll find, render prev/next buttons invisible for now */
    pageNode.classList.add('invisible');
    btnPrev.classList.add('invisible', 'disabled');
    btnNext.classList.add('invisible', 'disabled');

    map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
      const properties = feature.getProperties();
      const def = layers[properties.layer];
      if (def === undefined || def.popover === undefined) {
        /* skip layers which didn't opt-in for popover */
        return;
      }

      /* turn the properties into a fine table */
      const table = document.createElement('table');
      table.classList.add('table', 'table-sm', 'table-borderless', 'table-hover');

      const tbody = document.createElement('tbody');
      table.appendChild(tbody);

      def.popover.forEach(function([desc, key, opts]) {
        let v = properties[key];
        if (opts === undefined) {
          opts = {};
        }
        if (opts.fn !== undefined) {
          v = opts.fn(v);
        }
        if (v === undefined) {
          v = document.createTextNode('');
        } else if (!(v instanceof HTMLElement)) {
          v = document.createTextNode(v);
        }

        const tr = document.createElement('tr');
        tbody.appendChild(tr);

        const td1 = document.createElement('td');
        tr.appendChild(td1);
        const textDesc = document.createTextNode(desc);
        td1.appendChild(textDesc);

        const td2 = document.createElement('td');
        tr.appendChild(td2);
        td2.appendChild(v);
        if (opts.classes !== undefined) {
          opts.classes.forEach((c) => td2.classList.add(c));
        }
      });

      const content = document.createElement('div');
      if (def.popoverTitle !== undefined) {
        const h = document.createElement('h6');
        content.appendChild(h);
        const textNode = document.createTextNode(def.popoverTitle);
        h.appendChild(textNode);
      }

      // console.log(properties);
      content.appendChild(table);
      features.push(content);

      pageCount.innerHTML = features.length.toString();
      if (features.length == 2) {
        /* there are ≥2 features, make prev/pre buttons visible */
        btnNext.classList.remove('invisible', 'disabled');
        btnPrev.classList.remove('invisible');
        pageNode.classList.remove('invisible');
      }

      if (popover === null || popover.tip === null) {
        /* create a new popover if we're not already showing one */
        pageNum.innerHTML = (featureNum + 1).toString();
        popupOverlay.setPosition(event.coordinate);

        popover = new Popover(popup, {
          template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div>' +
                    '<div class="popover-header"></div><div class="popover-body"></div></div>',
          title: header,
          content: content,
          html: true,
          placement: 'right',
          fallbackPlacements: ['right', 'left', 'bottom', 'top'],
          container: container0,
        });
        popover.show();
      }
    }, {
      hitTolerance: 5,
      checkWrapped: false,
    });
  });
}());