<template>
  <TilemapLayer :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="10" />
  <Controls :layer="tiles" :depth="0" />
</template>

<script setup lang="ts">
import config from '@/config'
import { TilemapLayer, useScene } from 'phavuer'
import { useAssetStore } from '@/stores/assets'
import { useZoneStore } from '@/stores/zone'
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { placeTile, setAllTiles } from '@/services/zone'
import Controls from '@/components/utilities/Controls.vue'

const emit = defineEmits(['tilemap:create'])

const assetStore = useAssetStore()
const zoneStore = useZoneStore()
const scene = useScene()

const { zone } = storeToRefs(zoneStore)
const zoneTilemap = ref(createTilemap())
const tiles = ref(createTileLayer())
const tileArray = ref(createTileArray())

function createTilemap() {
  const zoneData = new Phaser.Tilemaps.MapData({
    width: zone.value?.width,
    height: zone.value?.height,
    tileWidth: config.tile_size.x,
    tileHeight: config.tile_size.y,
    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
    format: Phaser.Tilemaps.Formats.ARRAY_2D
  })
  const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
  emit('tilemap:create', tilemap)
  return tilemap
}

function createTileLayer() {
  const tilesFromZone = zone.value?.tiles || []
  const uniqueTiles = new Set(tilesFromZone.flat().filter(Boolean))

  const tilesetImages = Array.from(uniqueTiles).map((tile, index) => {
    return zoneTilemap.value.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 0, 0, index + 1)
  })

  // Add blank tile
  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))

  return zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
}

function createTileArray() {
  return Array.from({ length: zone.value?.width ?? 0 }, () =>
    Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile')
  )
}

onBeforeMount(() => {
  if (zone.value?.tiles) {
    setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
    tileArray.value = zone.value.tiles.map(row =>
      row.map(tileId => tileId || 'blank_tile')
    )
  } else {
    tileArray.value.forEach((row, y) =>
      row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile'))
    )
  }
})

onBeforeUnmount(() => {
  tiles.value?.destroy()
  zoneTilemap.value.removeAllLayers()
  zoneTilemap.value.destroy()
})
</script>