<template>
  <Teleport to="body">
    <Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
      <template #modalHeader>
        <h3 class="modal-title">Tiles</h3>
      </template>
      <template #modalBody>
        <canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
        <div class="tiles">
          <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="selectTile(index)" :class="{ selected: selectedTile === index }" />
        </div>
      </template>
    </Modal>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import config from '@/config'
import Modal from '@/components/utilities/Modal.vue'

const tileWidth = config.tile_size.x
const tileHeight = config.tile_size.y
const tiles = ref<string[]>([])
const selectedTile = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false)

// Hardcoded image path
const imagePath = '/assets/tiles/default.png'

const loadImage = (src: string): Promise<HTMLImageElement> => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = src
  })
}

const splitTiles = (img: HTMLImageElement) => {
  if (!canvas.value) {
    console.error('Canvas not found')
    return
  }
  const ctx = canvas.value.getContext('2d')
  if (!ctx) {
    console.error('Failed to get canvas context')
    return
  }

  const tilesetWidth = img.width
  const tilesetHeight = img.height
  const columns = Math.floor(tilesetWidth / tileWidth)
  const rows = Math.floor(tilesetHeight / tileHeight)

  tiles.value = []
  selectedTile.value = null

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < columns; col++) {
      const x = col * tileWidth
      const y = row * tileHeight

      ctx.clearRect(0, 0, tileWidth, tileHeight)
      ctx.drawImage(img, x, y, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight)

      const tileDataURL = canvas.value.toDataURL()
      tiles.value.push(tileDataURL)
    }
  }
}

const selectTile = (index: number) => {
  selectedTile.value = index
}

onMounted(async () => {
  isModalOpen.value = true
  const img = await loadImage(imagePath)
  await nextTick()
  splitTiles(img)
})
</script>

<style lang="scss">
.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tiles img {
  width: 64px;
  height: 32px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.3s ease;
}

.tiles img.selected {
  border: 2px solid #ff0000;
}
</style>
