<template>
  <div class="flex h-full w-full flex-col md:flex-row">
    <div class="relative min-h-0 flex-1">
      <ClientOnly>
        <KestrelMap
          :devices="devices ?? []"
          :pois="pois ?? []"
          :live-sessions="liveSessions ?? []"
          :cot-entities="cotEntities ?? []"
          :cot-layers="cotLayers"
          :alpr-markers="showAlpr ? (alprMarkers ?? []) : []"
          :show-alpr="showAlpr"
          :can-edit-pois="canEditPois"
          @select="selectedCamera = $event"
          @select-live="onSelectLive($event)"
          @refresh-pois="refreshPois"
          @bounds-change="onMapBoundsChange"
          @toggle-alpr="toggleAlpr"
          @toggle-cot-layer="toggleLayer"
        />
        <template #fallback>
          <div
            class="h-full min-h-[300px] bg-kestrel-bg"
            aria-hidden="true"
          />
        </template>
      </ClientOnly>
    </div>
    <CameraViewer
      v-if="selectedCamera"
      :camera="selectedCamera"
      @close="selectedCamera = null"
    />
  </div>
</template>

<script setup>
const { devices, liveSessions } = useCameras()
const { data: pois, refresh: refreshPois } = usePois()
const { canEditPois } = useUser()
const { showAlpr, toggleAlpr, alprMarkers, onBoundsChange: onAlprBoundsChange } = useAlprCameras()
const { layers: cotLayers, layerQuery, toggleLayer } = useCotLayers()
const mapBounds = ref(null)
const { cotEntities } = useCotStream(mapBounds, layerQuery)
const selectedCamera = ref(null)

function onMapBoundsChange(bounds) {
  mapBounds.value = bounds
  onAlprBoundsChange(bounds)
}

function onSelectLive(session) {
  selectedCamera.value = (liveSessions.value ?? []).find(s => s.id === session?.id) ?? session
}

useAutoCloseLiveSession(selectedCamera, liveSessions)
</script>
