<script setup lang="ts">
import {
  LANE_IMAGES,
  LANE_IMAGES_HOVER,
  LANE_IMAGES_SELECTED,
  POSITIONS_STR
} from '~/utils/cdragon'

const emit = defineEmits<{
  filterChange: [value: number]
}>()

const laneImgs = Array(5)
  .fill(ref(''))
  .map((_, index) => ref(LANE_IMAGES[index]))
const laneFilter = ref(-1)

function selectLaneFilter(index: number) {
  // Unselect previous filter
  if (laneFilter.value != -1) {
    laneImgs[laneFilter.value].value = LANE_IMAGES[laneFilter.value]

    // This is a deselection.
    if (laneFilter.value == index) {
      laneFilter.value = -1
      emit('filterChange', laneFilter.value)
      return
    }
  }

  // Select new one
  laneImgs[index].value = LANE_IMAGES_SELECTED[index]
  laneFilter.value = index
  emit('filterChange', laneFilter.value)
}

function handleMouseOut(laneImg: Ref<string>, index: number) {
  if (laneImg.value == LANE_IMAGES_HOVER[index]) laneImg.value = LANE_IMAGES[index]
}
function handleHover(laneImg: Ref<string>, index: number) {
  if (laneImg.value == LANE_IMAGES[index]) laneImg.value = LANE_IMAGES_HOVER[index]
}
</script>

<template>
  <div style="width: fit-content">
    <NuxtImg
      v-for="(laneImg, index) in laneImgs"
      format="webp"
      :alt="POSITIONS_STR[index]"
      class="lane-img"
      :src="laneImg.value"
      @mouseout="handleMouseOut(laneImg, index)"
      @mouseover="handleHover(laneImg, index)"
      @click="selectLaneFilter(index)"
    />
  </div>
</template>

<style>
.lane-img {
  width: 64px;
  margin-left: 5px;
  margin-right: 5px;
}
.lane-img:hover {
  cursor: pointer;
}

@media only screen and (max-width: 450px) {
  .lane-img {
    width: 48px;
  }
}
</style>
