<template>
  <Controls :layer="tiles" :depth="0" />
</template>

<script setup lang="ts">
import config from '@/config'
import { useScene } from 'phavuer'
import { useGameStore } from '@/stores/gameStore'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { onBeforeMount, onBeforeUnmount } from 'vue'
import { createTileArray, getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
import Controls from '@/components/utilities/Controls.vue'

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

const scene = useScene()
const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()

const zoneTilemap = createTilemap()
const tiles = createTileLayer()

function createTilemap() {
  const zoneData = new Phaser.Tilemaps.MapData({
    width: zoneEditorStore.zone?.width,
    height: zoneEditorStore.zone?.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 tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
  tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))

  const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer

  layer.setDepth(0)
  layer.setCullPadding(2, 2)

  return layer
}

function pencil(pointer: Phaser.Input.Pointer) {
  // Check if zone is set
  if (!zoneEditorStore.zone) return

  // Check if tool is pencil
  if (zoneEditorStore.tool !== 'pencil') return

  // Check if draw mode is tile
  if (zoneEditorStore.drawMode !== 'tile') return

  // Check if there is a selected tile
  if (!zoneEditorStore.selectedTile) return

  // Check if left mouse button is pressed
  if (!pointer.isDown) return

  // Check if there is a tile
  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
  if (!tile) return

  // Place tile
  placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)

  // Adjust zoneEditorStore.zone.tiles
  zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
}

function eraser(pointer: Phaser.Input.Pointer) {
  // Check if zone is set
  if (!zoneEditorStore.zone) return

  // Check if tool is pencil
  if (zoneEditorStore.tool !== 'eraser') return

  // Check if draw mode is tile
  if (zoneEditorStore.eraserMode !== 'tile') return

  // Check if left mouse button is pressed
  if (!pointer.isDown) return

  // Check if there is a tile
  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
  if (!tile) return

  // Place tile
  placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')

  // Adjust zoneEditorStore.zone.tiles
  zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
}

function paint(pointer: Phaser.Input.Pointer) {
  // Check if zone is set
  if (!zoneEditorStore.zone) return

  // Check if tool is pencil
  if (zoneEditorStore.tool !== 'paint') return

  // Check if there is a selected tile
  if (!zoneEditorStore.selectedTile) return

  // Check if left mouse button is pressed
  if (!pointer.isDown) return

  // Set new tileArray with selected tile
  setAllTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))

  // Adjust zoneEditorStore.zone.tiles
  zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
}

onBeforeMount(() => {
  if (!zoneEditorStore.zone?.tiles) {
    return
  }
  setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)

  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
  scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
})

onBeforeUnmount(() => {
  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
  scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)

  zoneTilemap.destroyLayer('tiles')
  zoneTilemap.removeAllLayers()
  zoneTilemap.destroy()
})
</script>
