<template>
  <div class="video-grid" :class="`grid-${gridSize}x${gridSize}`">
    <VideoCell
      v-for="position in totalCells"
      :key="position - 1"
      :position="position - 1"
      :slot-data="getSlotByPosition(position - 1)"
      @select-camera="$emit('select-camera', position - 1)"
      @update-slot="(slot) => $emit('update-slot', position - 1, slot)"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import VideoCell from './VideoCell.vue'
import type { GridSlot } from '@/composables/useMonitorStore'

interface Props {
  gridSize: 2 | 3 | 4
  slots: GridSlot[]
}

const props = defineProps<Props>()

defineEmits<{
  'select-camera': [position: number]
  'update-slot': [position: number, slot: Partial<GridSlot> | null]
}>()

const totalCells = computed(() => props.gridSize * props.gridSize)

function getSlotByPosition(position: number): GridSlot | undefined {
  return props.slots.find((slot) => slot.position === position)
}
</script>

<style lang="scss" scoped>
.video-grid {
  display: grid;
  gap: var(--spacing-base);
  width: 100%;
  align-content: start;

  &.grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
  }

  &.grid-3x3 {
    grid-template-columns: repeat(3, 1fr);
  }

  &.grid-4x4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>
