components/reference-circuit/useReferenceCircuitMapOperations.js

import {
  inject,
  ref,
  watchEffect,
  onBeforeUnmount,
  onMounted,
  watch,
} from 'vue'
import { ReferenceCircuitStateSymbol } from './ReferenceCircuitSymbols.js'
import vueLeafletMapPlugin from '@/plugins/vue-map.js'

export default function () {
  const state = inject(ReferenceCircuitStateSymbol)

  onBeforeUnmount(() => {
    removeCircuitVersionFromMap()
  })
  onMounted(() => {
    watchCircuitVersionsSectionsDatasetChanged()
  })

  /**
   *
   * @function drawCircuitVersions
   */
  const drawCircuitVersions = () => {
    state.circuitVersionsSections.value.forEach((circuitVersionItem) => {
      const layerName = `circuitVersions_${circuitVersionItem.circuitId}_${circuitVersionItem.versionId}`

      vueLeafletMapPlugin
        .getLeafletWrapperVM()
        .drawPolylines(circuitVersionItem.sections, {
          visible: circuitVersionItem.visible,
          layer: layerName,
          zIndex: 10, //i.g Draw above location circuit execution polyline
        })
    })
  }

  const watchCircuitVersionsSectionsDatasetChanged = () => {
    let isRemove = state.circuitVersionsSections.value.length === 0
    if (isRemove) {
      removeCircuitVersionFromMap()
    } else {
      drawCircuitVersions()
      fitBoundsUsingCircuitVersionsPolylines()
    }
  }

  //Watch circuit versions sections dataset and render circuit version on map when data changes
  //watchEffect(watchCircuitVersionsSectionsDatasetChanged)
  watch(
    state.circuitVersionsSections,
    watchCircuitVersionsSectionsDatasetChanged,
    {
      deep: true,
    }
  )

  function removeCircuitVersionFromMap() {
    clearHighlightedSectionFromMap()
    vueLeafletMapPlugin.getLeafletWrapperVM() &&
      vueLeafletMapPlugin
        .getLeafletWrapperVM()
        .removeLayerGroupBy((layerGroup) => {
          return layerGroup.name.includes('circuitVersions_')
        })
  }

  function fitBoundsUsingCircuitVersionsPolylines() {
    let totalBounds = state.circuitVersionsSections.value
      .filter((item) => item.visible)
      .reduce((acum, item) => {
        acum = [
          ...acum,
          ...item.sections.reduce((a, v) => {
            a = [...a, ...v.polyline]
            return a
          }, []),
        ]
        return acum
      }, [])

    if (totalBounds.length > 0) {
      vueLeafletMapPlugin.fitBounds(totalBounds)
    }
  }

  /**
   * Updates the current active map with circuit version polylines
   */
  function highlightCircuitVersionSectionOnMap(sectionItem) {
    vueLeafletMapPlugin.getLeafletWrapperVM().drawPolylines(
      [
        {
          ...sectionItem,
          color: vueLeafletMapPlugin.defaultHighlightColor,
        },
      ],
      {
        visible: true,
        layer: `circuitVersionSectionHighlight`,
        zIndex: 200,
      }
    )
    vueLeafletMapPlugin
      .getLeafletWrapperVM()
      .map.flyToBounds(sectionItem.polyline)
  }

  const highlightedSection = ref(null)
  const setHiglightedSection = (section) => (highlightedSection.value = section)
  watchEffect(() => {
    let currentSection = highlightedSection.value
    if (currentSection) {
      highlightCircuitVersionSectionOnMap(currentSection)
    } else {
      clearHighlightedSectionFromMap()
    }
  })

  function clearHighlightedSectionFromMap() {
    vueLeafletMapPlugin.getLeafletWrapperVM() &&
      vueLeafletMapPlugin
        .getLeafletWrapperVM()
        .removeLayerGroup('circuitVersionSectionHighlight')
  }

  return {
    setHiglightedSection,
  }
}