import { testList } from "./poi/testGroups.js";
import { coordOverlay } from "./coordOverlay.js";
import { getOverlayMaps } from "./fetching.js";
import customIcons from './iconsMap.js';

const center = 127.5;
let overlayPoi = {};

var map = L.map("map", {
  crs: L.CRS.Simple,
  minZoom: 1,
  maxZoom: 8,
}).setView([-127.5, 127.5], 4); // Centre de la carte

var boundsMax = [
  [-255, 0],
  [0, 255],
];

L.tileLayer("/tiles/{z}/{x}/{y}.jpg", {
  tileSize: 255, // Assurez-vous que cette valeur correspond à la taille de vos tuiles
  noWrap: true,
  bounds: boundsMax,
  attribution: "© Asheron's call 2 maps",
}).addTo(map);

var rectangle = L.rectangle(boundsMax, { color: "#ff7800", weight: 1 });

map.on("click", function (ev) {
  coordOverlay.update(GetLandBlockId(ev), coordToCardinal(ev.latlng.lat, ev.latlng.lng));
  rectangle.remove();
  rectLandBlock(ev, map);
});

var testtmp = L.layerGroup();

var overlayMaps = {};

async function setupOverlayMaps() {
  overlayPoi = await getOverlayMaps(); // Attend que overlayPoi soit chargé

  // Itérer sur les clés de overlayPoi
  Object.keys(overlayPoi).forEach(key => {
    const layerGroup = overlayPoi[key];
    overlayMaps[key] = layerGroup; // Assigner chaque layerGroup à la clé correspondante dans overlayMaps
    layerControl.addOverlay(layerGroup, key); // Ajoute chaque couche à la carte avec son nom
  });
}

setupOverlayMaps(); // Appel de la fonction pour initialiser les overlayMaps


var markers = L.markerClusterGroup({
  chunkedLoading: true,
  disableClusteringAtZoom: 8,
});
testList.eachLayer(function (layer) {
  markers.addLayer(layer);
});

var layerControl = L.control.layers(null, overlayMaps).addTo(map);
coordOverlay.addTo(map);

function GetLandBlockId(ev) {
  var latlng = ev.latlng;
  var pointATmp = map.project(latlng, 4);
  const blockSize = 16; // Taille d'un bloc
  var y = Math.floor((4080 - pointATmp.y) / blockSize);
  var x = Math.floor(pointATmp.x / blockSize);

  return L.point(x, y);
}

function rectLandBlock(ev, map) {
  // Latitude et longitude initiales du coin supérieur gauche du rectangle
  var latlng = ev.latlng;

  var pointATmp = map.project(latlng, 4);

  const blockSize = 16; // Taille d'un bloc
  var testReverse = Math.floor((4080 - pointATmp.y) / blockSize);
  var pointA = L.point(Math.round(pointATmp.x), Math.round(pointATmp.y));
  const blockX = Math.floor(pointA.x / blockSize) * 16;
  const blockY = Math.floor(pointA.y / blockSize) * 16;

  var landX = blockX / 16;

  var pointAn = L.point(blockX, blockY);
  var pointB = L.point(blockX + blockSize, blockY + blockSize);
  console.log(pointAn, pointB);
  var latlngA = map.unproject(pointAn, 4);
  var latlngB = map.unproject(pointB, 4);

  // Création du rectangle
  var bounds = L.latLngBounds(latlngA, latlngB);
  rectangle = L.rectangle(bounds, { color: "#ff7800", weight: 1, interactive: false })
    .addTo(map)
    .bindPopup(
      "LandBlock : 0x" +
      landX.toString(16).toUpperCase().padStart(2, "0") +
      "" +
      testReverse.toString(16).toUpperCase().padStart(2, "0") +
      "FFFF"
    );
}

setInterval(fetchCharacterLocations, 5000);

// Fonction pour récupérer les positions des personnages
function fetchCharacterLocations() {
  fetch("/characterloc") // Effectuer une requête GET vers /characterloc
    .then((response) => response.json()) // Convertir la réponse en JSON
    .then((data) => {
      // Parcourir les données et afficher chaque position de personnage
      data.forEach((character) => {
        updateCharacterMarker(
          character.literalValue,
          character.locy,
          character.locx
        );
      });
    })
    .catch((error) => {
      console.error("Error fetching character locations:", error);
    });
}

// Dictionnaire pour stocker les marqueurs des personnages
var characterMarkers = {};
// Fonction pour créer ou mettre à jour un marqueur de personnage
function updateCharacterMarker(characterId, lat, lng) {
  // Vérifier si le marqueur existe déjà
  if (characterMarkers[characterId]) {
    // Mettre à jour la position du marqueur existant
    characterMarkers[characterId].setLatLng([lat, lng]);
  } else {
    // Créer un nouveau marqueur
    var marker = L.marker([lat, lng], { icon: customIcons.greenPlayer }).bindPopup(characterId).addTo(map);
    // Stocker le marqueur dans le dictionnaire
    characterMarkers[characterId] = marker;
  }
}

function coordToCardinal(lat, lng) {
  // Vérifier que les valeurs de lat et lng sont dans la plage spécifiée
  if (lat > 0 || lat < -255 || lng < 0 || lng > 255) {
    return "Coordonnées invalides";
  }
  let cardinalLng = 0;
  if (lng < center) cardinalLng = 100 - (lng * 100 / center);
  else if (lng > center) cardinalLng = (lng - center) * 100 / center;
  else if (lng === center) cardinalLng = 0;

  let cardinalLat = 0;
  lat = lat * -1;
  if (lat < center) cardinalLat = 100 - (lat * 100 / center);
  else if (lat > center) cardinalLat = (lat - center) * 100 / center;
  else if (lat === 0) cardinalLat = 0;

  // Déterminer les directions
  let directionLat = lat < center ? "N" : "S";
  let directionLng = lng < center ? "W" : "E";

  // Retourner la chaîne de caractères résultante
  return cardinalLat.toFixed(1) + " " + directionLat + " - " + cardinalLng.toFixed(1) + " " + directionLng;
}