import {Component, effect, ElementRef, NgZone, viewChild} from '@angular/core';
import {LeafletModule} from '@bluehalo/ngx-leaflet';
import {
  mapUtils,
  NshmpLibNgMapBaseLayersControlComponent,
  NshmpLibNgMapLeafletControlComponent,
} from '@ghsc/nshmp-lib-ng/map';
import {NshmId} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/nshm';
import * as L from 'leaflet';

import {Layers} from '../../models/layers.model';
import {AppService} from '../../services/app.service';
import {LegendComponent} from '../legend/legend.component';

/**
 * Leaflet map with layers showing NSHM boundary, fault sections, and test sites.
 */
@Component({
  imports: [
    LegendComponent,
    LeafletModule,
    NshmpLibNgMapLeafletControlComponent,
    NshmpLibNgMapBaseLayersControlComponent,
  ],
  selector: 'app-map',
  styleUrl: './map.component.scss',
  templateUrl: './map.component.html',
})
export class MapComponent {
  /** Leaflet mouse position control */
  mousePositionControl = new mapUtils.MousePosition();

  /** Zoom levels for certain NSHMs */
  siteZoomLevel: Partial<Record<NshmId, number>> = {
    ALASKA_2023: 8,
    CONUS_2018: 7,
    CONUS_2023: 9,
    HAWAII_2021: 9,
  };

  /** Map bounds state */
  bounds = this.service.bounds;
  /** Form field state */
  formGroup = this.service.formGroup;
  /** Map layers state */
  layers = this.service.layers;
  /** Map options state */
  mapOptions = this.service.mapOptions;

  readonly mapEl = viewChild<ElementRef<HTMLElement>>('map');

  constructor(
    public service: AppService,
    private zone: NgZone,
  ) {
    effect(() => {
      this.onMap(
        this.service.map(),
        this.layers(),
        this.formGroup.getRawValue().model,
      );
    });
  }

  /**
   * Handle on map event.
   *
   * Set map and main events.
   *
   * @param map The leaflet map
   */
  onMapReady(map: L.Map): void {
    this.service.map = map;

    map.on('click', () =>
      this.zone.run(() => {
        this.service.resetLayers();
        this.service.updateState({
          earthquakeInfoPopupData:
            this.service.initialState().earthquakeInfoPopupData,
          infoPopupData: this.service.initialState().infoPopupData,
        });
      }),
    );

    if (!L.Browser.mobile) {
      this.mousePositionControl.addTo(map);
    }

    L.control.scale({position: 'bottomleft'}).addTo(map);
  }

  /**
   * Turn off map event.
   *
   * @param map The map
   * @param event The event to turn off
   */
  private mapOff(map: L.Map, event: 'baselayerchange' | 'zoom'): void {
    if (map.listens(event)) {
      map.off(event);
    }
  }

  /**
   * Handle event on map, layers, and control form.
   *
   * Set on zoom event and add attribution.
   *
   * @param map The map
   * @param layers Leaflet layers
   * @param model NSHM
   */
  private onMap(map: L.Map, layers: Layers, model: NshmId): void {
    if (!map || !layers) {
      return;
    }

    this.mapOff(map, 'zoom');
    map.on('zoom', () => this.onZoom(layers, map.getZoom(), model));

    map.attributionControl.addAttribution(layers.baseLayer.getAttribution());
  }

  /**
   * Open tooltip on test sites if zoomed in.
   *
   * @param testSitesLayer The test sites layer
   * @param zoom Map zoom number
   * @param model NSHM
   */
  private onTestSitesZoom(
    testSitesLayer: L.GeoJSON,
    zoom: number,
    model: NshmId,
  ): void {
    if (zoom >= this.siteZoomLevel[model]) {
      this.testSitesTooltipOpen(testSitesLayer);
    } else {
      this.testSitesTooltipClose(testSitesLayer);
    }
  }

  /**
   * On zoom event function.
   *
   * @param layers The layers
   * @param zoom Map zoom level
   * @param model NSHM
   */
  private onZoom(layers: Layers, zoom: number, model: NshmId) {
    if (layers.testSitesLayer) {
      this.onTestSitesZoom(layers.testSitesLayer, zoom, model);
    }

    if (layers.faultSectionLayer) {
      layers.faultSectionLayer.setStyle({
        weight: this.service.faultsWeight(),
      });
    }
  }

  /**
   * Close test sites tooltips.
   * @param testSitesLayer The test sites layer
   */
  private testSitesTooltipClose(testSitesLayer: L.GeoJSON): void {
    testSitesLayer.getLayers().forEach(layer => {
      const tooltip = layer.getTooltip();
      layer.unbindTooltip();

      layer.bindTooltip(tooltip, {
        permanent: false,
      });

      layer.closeTooltip();
    });
  }

  /**
   * Open test sites tooltips.
   *
   * @param testSitesLayer The test sites layer
   */
  private testSitesTooltipOpen(testSitesLayer: L.GeoJSON): void {
    testSitesLayer.getLayers().forEach(layer => {
      if (!layer.isTooltipOpen()) {
        const tooltip = layer.getTooltip();
        layer.unbindTooltip();

        layer.bindTooltip(tooltip, {
          permanent: true,
        });

        layer.openTooltip();
      }
    });
  }
}