<template>
  <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="data" />
  <Player />
  <Controls :layer="layer" />
</template>

<script setup lang="ts">
import { refObj, TilemapLayer, useScene } from 'phavuer'
import Player from '@/components/sprites/player/Player.vue'
import config from '@/config'
import type { Ref } from 'vue'
import Tileset = Phaser.Tilemaps.Tileset
import Controls from '@/components/Controls.vue'

const scene = useScene()
const mapData = new Phaser.Tilemaps.MapData({
  width: 10,
  height: 10,
  tileWidth: config.tile_size.x,
  tileHeight: config.tile_size.y,
  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
  format: Phaser.Tilemaps.Formats.ARRAY_2D,
});

const { width: tileSizeWidth } = mapData;
const { width, height } = scene.cameras.main;
const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
/**
 * 1 tile is 64x32
 * the map is 10x10
 * so the map is 640x320
 */
const tileset: (Tileset|null) = map.addTilesetImage('default', 'tiles');
// const layer: (Layer|null) = map.createBlankLayer('layer', tileset);

const layer:TilemapLayer = map.createBlankLayer('layer', tileset, 0, config.tile_size.y);
const tilemapLayer: Ref<(TilemapLayer|undefined)> = refObj();

const data: any = [
  [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
];

data.forEach((row, y) => {
  row.forEach((tile, x) => {
    layer.putTileAt(tile, x, y);
  });
});

// center camera
const centerY = (map.height * map.tileHeight) / 2
const centerX = (map.width * map.tileWidth) / 2
scene.cameras.main.centerOn(centerX, centerY)

/**
 * Resources
 * https://clintbellanger.net/articles/isometric_math/
 * https://gist.github.com/veleek/3be73dc61d5f5a80abc0f72c3ffe390e
 * https://gamedev.stackexchange.com/questions/116485/how-to-center-a-tilemap-in-phaser
 * https://github.com/Nulligma/phaser-isometric-test/blob/master/src/main.ts
 * https://github.com/neki-dev/isometric-snippets
 * https://github.com/itsezc/CycloneIO/blob/next/packages/client/games/HabboEngine.ts
 * https://github.com/daan93/phaser-isometric-demo/tree/main
 */
</script>