<template>
  <div class="flex flex-col gap-50">
    <div class="flex flex-col gap-2">
      <div class="text-gray text-2xl">
        Aktuelles Ziel
      </div>
      <ChangeBlinkingBox :blink-seconds="currentTarget === null ? 0 : 10" :value="currentTarget" class="text-7 md:text-10">
        {{ currentTarget ?? "Niemand" }}
      </ChangeBlinkingBox>
    </div>
    <div v-if="nextStepWithChange !== null" class="flex flex-col gap-2">
      <div class="text-gray text-6">
        Nächstes Ziel
        <span class="whitespace-nowrap">
            [{{
            nextStepWithChange.delta === 0
                ? "in dieser Szene"
                : nextStepWithChange.delta === 1
                    ? "in der nächsten Szene"
                    : `in ${nextStepWithChange.delta} Szenen`
          }}]
          </span>
      </div>
      <div class="text-7 md:text-10">{{ nextStepWithChange.target }}</div>
    </div>
  </div>
</template>

<style module>

</style>

<script lang="ts" setup>
  import { useRoute } from "vue-router"
  import { computed } from "vue"
  import { current, getNextValidPosition, getSceneIndex, getStep, ShowPosition } from "@/state"
  import ChangeBlinkingBox from "../../components/ChangeBlinkingBox.vue"

  const route = useRoute()
  const isLeft = computed(() => route.query.side === "left")
  const targetProperty = computed<"leftSpotTarget" | "rightSpotTarget">(() => isLeft.value ? "leftSpotTarget" : "rightSpotTarget")
  const currentTarget = computed(() => current.step[targetProperty.value])

  interface StepWithChange {
    delta: number
    position: ShowPosition
    target: string
  }

  const nextStepWithChange = computed<StepWithChange | null>(() => {
    let position: ShowPosition | null = getNextValidPosition(current.step.position)
    let lastTarget: string | null = currentTarget.value

    while (position !== null) {
      const step = getStep(position)

      if (step[targetProperty.value] !== null && step[targetProperty.value] !== lastTarget) {
        return {
          position: step.position,
          delta: getSceneIndex(step.position) - current.sceneIndex,
          target: step[targetProperty.value]!
        }
      }

      lastTarget = step[targetProperty.value]
      position = getNextValidPosition(position)
    }

    return null
  })
</script>