<template>
  <Zone :depth="baseDepth" :originX="mapObj?.originX" :originY="mapObj?.originY" :width="mapObj?.frameWidth" :height="mapObj?.frameHeight" :x="x" :y="y" />
</template>

<script setup lang="ts">
import type { MapObject, PlacedMapObject } from '@/application/types'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { calculateIsometricDepth } from '@/services/mapService'
import { onPreUpdate, useScene, Zone } from 'phavuer'
import { computed, defineProps, onMounted, onUnmounted } from 'vue'

const mapEditor = useMapEditorComposable()
const partitionPoints = [0]

let baseDepth = 0

const props = defineProps<{
  obj?: PlacedMapObject
  mapObj?: MapObject
  x?: number
  y?: number
}>()

const scene = useScene()
const group = scene.add.group()

const createImagePartition = (startX: number, endX: number, depthOffset: number) => {
  if (!props.mapObj?.id) return

  const img = scene.add.image(0, 0, props.mapObj.id)

  img.setOrigin(props.mapObj.originX, props.mapObj.originY)
  img.setCrop(startX, 0, endX, props.mapObj?.frameHeight)
  img.setDepth(baseDepth + depthOffset)

  group.add(img)
}

onPreUpdate(() => {
  if (!props.obj || !props.x || !props.y) return

  group.setXY(props.x, props.y)

  const isMoving = mapEditor.movingPlacedObject.value?.id === props.obj.id
  const isSelected = mapEditor.selectedMapObject.value?.id === props.obj.id
  const isPlacedSelected = mapEditor.selectedPlacedObject.value?.id === props.obj.id

  baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)

  group.setAlpha(isMoving || isSelected ? 0.5 : 1)
  group.setTint(isPlacedSelected ? 0x00ff00 : 0xffffff)
  group.setDepth(baseDepth)

  let orderedImages = group.getChildren()

  orderedImages.forEach((child, index) => {
    const image = child as Phaser.GameObjects.Image
    if (image && props.obj) {
      image.flipX = props.obj.isRotated

      if (props.obj.isRotated) {
        var offsetNum = props.mapObj!.depthOffsets.length

        //Could break in case of images with odd partion number
        //Shifts image over so that it becomes aligned again after flipping
        if (index < offsetNum / 2) {
          image.x = props.x! - props.mapObj!.frameWidth / offsetNum
        } else {
          image.x = props.x! + props.mapObj!.frameWidth / offsetNum
        }

        image.setDepth(baseDepth - props.mapObj!.depthOffsets[index])
      } else {
        image.x = props.x!
        image.setDepth(baseDepth + props.mapObj!.depthOffsets[index])
      }
    }
  })
})

// Initial setup
if (props.mapObj && props.x && props.y) {
  baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)

  group.setXY(props.x, props.y)
  group.setOrigin(props.mapObj.originX, props.mapObj.originY)

  let sliceCount = props.mapObj.depthOffsets.length
  for (let j = 1; j <= sliceCount; j++) {
    partitionPoints.push(j * (props.mapObj.frameWidth / sliceCount))
  }

  for (let i = 0; i < partitionPoints.length - 1; i++) {
    createImagePartition(partitionPoints[i], partitionPoints[i + 1], props.mapObj.depthOffsets[i])
  }
}

onUnmounted(() => {
  group.destroy(true, true)
})
</script>
