---
import Layout from 'layouts/PageLayout.astro'
import 'leaflet/dist/leaflet.css'
import 'leaflet-geosearch/dist/geosearch.css'
import CheckBox from 'components/CheckBox.astro'
import Radios from 'components/Radios.astro'
import ListResult, { type RecordModel } from 'pocketbase'
import { Expand, Trash } from 'lucide-astro'

const pb = Astro.locals.pb
const connected = pb.authStore.isValid

const metadata = {
  title: 'Maps',
  ignoreTitleTemplate: true,
}

let fav = new Array<any>

if(connected){
  try {
    const request = await pb.collection('user_poi').getList(1,10,{filter:`owner="${pb.authStore.model!.id}"`, expand:"poi_list"})
    request.items.forEach(element => {
      fav.push(element.expand!.poi_list.Poi)
    });
  } catch (error) {
    console.log(error);
  }
}

console.log(fav);


---

<Layout metadata={metadata}>

  <div class="h-[calc(100vh-5rem)] flex flex-row">
    <div class="w-1/5 flex flex-col">
      <p id="message" class="hidden text-center mb-3">pouet</p>
      <p class="text-center text-2xl mb-3">Filtre :</p>
      <div class="">
        <p>note minimal :</p>
        <Radios
          values={[
              {name: "1", label: "1", checked: true},
              {name: "2", label: "2"},
              {name: "3", label: "3"},
              {name: "1h", label: "1h"},
              {name: "2h", label: "2h"},
              {name: "3h", label: "3h"},
            ]}
        />
        <p class="text-center text-xl mb-3">Type POI :</p>
        <CheckBox
          label="Bar, Pub, Café,..."
          name="filter"
          value="drink"
          checked
        />
      </div>
      <div class="mb-3 grow">
        <p class="text-center text-xl mb-3">Source :</p>
        <CheckBox
          label="Open Trip Maps"
          name="filter"
          value="otm"
          checked
        />
      </div>
      {connected && (
      <div class="mb-2">
        <p class="text-center text-xl mb-3">Favori :</p>
        {fav.map(val =>(
          <div class="ml-2 flex flex-row mb-1" id="fav-div">
            <p class="grow poi-favori" id={val.id} data-pos={val.geometry.coordinates}>{val.properties.name}</p>
            <Trash id={val.id} class="poi-trash"/>
          </div>
        ))}
      </div>
      )}
    </div>
    <div class="flex flex-col h-full grow">
      <div class="w-full h-full grow" id="map" />
    </div>
  </div>
  <!-- TODO: faire en sort que le style soit propre -->

  <!-- for remouve footer -->
  <div slot="footer"></div>
  <!-- penser a rm  11 au rem au dessus pour la taille -->
</Layout>

<script>
  import L, {Popup} from 'leaflet'
  import markerShadow from "leaflet/dist/images/marker-shadow.png"
  import markerIcon from "leaflet/dist/images/marker-icon.png"
  import { OpenStreetMapProvider } from 'leaflet-geosearch'
  import { GeoSearchControl } from 'leaflet-geosearch'

  const showFav = document.querySelectorAll(".poi-favori")
  const trashFav = document.querySelectorAll(".poi-trash")
  const favDiv = document.querySelector('#fav-div')

  const icon = {icon: new L.Icon({iconUrl: markerIcon.src, shadowUrl: markerShadow.src, iconAnchor: [13,41]})}

  // const BACK_URL = "http://localhost:3001/" //XXX : mettre url de prod
  const BACK_URL = "https://drink-tweb.cb85.fr/" //XXX : mettre url de prod

  // declare map
  const map = L.map('map', {
    center: [51.5, -0.09],
    zoom: 13,
    preferCanvas: true,
    zoomControl: false
  })
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map)

  // move zoom ctl to bottom
  L.control.zoom({
    position: 'bottomleft'
  }).addTo(map)

  const provider = new OpenStreetMapProvider()
  
  map.addControl(
    GeoSearchControl({
      notFoundMessage: 'Adresse introuvable !',
      provider,
      showMarker: false,
      style: 'bar',
    }),
  )

  async function saveToFav(element: any, save: boolean){
    const url = '/maps/save_poi';
    const options = {
      method: 'POST',
      body: JSON.stringify({Poi : element, save: save})
    };

    try {
      const response = await fetch(url, options);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error(error);
    }
  }

  function eventGotoFav(e: Element){
    e.addEventListener('click', () =>{
      const pose = e.getAttribute('data-pos')?.split(',')
      map.panTo(new L.LatLng(parseFloat(pose![1]),parseFloat(pose![0])))
    })
  }

  function eventRemoveFav(e: Element){
    e.addEventListener('click', async () => {
      await saveToFav({id:e.id, type:"Feature"},false)
      document.location.reload()
    })
  }

  showFav.forEach(e => {eventGotoFav(e)})
  trashFav.forEach(e => {eventRemoveFav(e)})

  let poiMarkers = new Array<L.Marker>
  let minimalNote = "1"
  let drink = true
  let otm = true
  
  // run api search
  function searchBox(){
    const nordWest = map.getBounds().getNorthWest()
    const southEast = map.getBounds().getSouthEast()
    const params: URLSearchParams = new URLSearchParams()

    params.append("lon1", nordWest.lng.toString())
    params.append("lat1", nordWest.lat.toString())
    params.append("lon2", southEast.lng.toString())
    params.append("lat2", southEast.lat.toString())
    params.append("rate", minimalNote)

    if(drink && otm){
      fetch(`${BACK_URL}otm/box?${params.toString()}`,{method: 'GET',headers: {'Content-Type': 'application/json'}}).then(function (response) {
        return response.json()
      }).then(function (data) {
        poiMarkers.forEach(element => {
          element.remove()
        })
        console.log(data)
        data.features.forEach(element => {
          const prop = element.properties
          const popup: Popup = new Popup()
          let tags = new String()
          prop.kinds.split(",").forEach(element => {
            tags += "- " + element + "<br/>"
          })
          const poiMarker = L.marker([element.geometry.coordinates[1],element.geometry.coordinates[0]],icon)
            .bindPopup(`<b>${prop.name}</b><br/>note : ${prop.rate} <br/>tags:<br/> ${tags} <p>favori : <input type="checkbox" name="like" id=${element.id}/><p>`)
            .on("click", () => {
              document.querySelectorAll<HTMLInputElement>('input[name="like"]').forEach(e => {
                e.addEventListener("click", () => {
                  console.log(element)
                  saveToFav(element, e.checked)
                  document.location.reload()
                })
              })
            })
          poiMarker.addTo(map)
          poiMarkers.push(poiMarker)
        })
      }).catch(function (err) {
        console.warn('Something went wrong.', err)
      })
    }
  }

  // fonciton pour lancer la recherche de box sur l'api
  function sender(){
    if(map.getZoom() >= 13){
      console.log("zoom OKAY")
      //TODO: mettre un message de recherche en cour
      searchBox()
    }else{
      console.log("zoom more to see result")
    }
  }
  // envent pour lancer la recherche
  const cooldown = 400
  sender()
  let timeoutHandle = window.setTimeout(sender, cooldown)
  
  window.clearTimeout(timeoutHandle)
  
  map.addEventListener("move",() =>{
    window.clearTimeout(timeoutHandle)
    timeoutHandle = window.setTimeout(sender, cooldown)
  })

  map.addEventListener("zoom", () => {
    if(map.getZoom() <= 11){
      poiMarkers.forEach(element => {
        element.remove()
      })
    }
  })

  document.querySelectorAll<HTMLInputElement>("input[name='filter']").forEach(e =>{
    e.addEventListener("click", () => {
      switch (e.value) {
        case "drink":
          drink = e.checked
        break;
      
        case "otm":
          otm = e.checked
        break;

        default:
          break;
      }
      poiMarkers.forEach(element => {
          element.remove()
      })
      searchBox()
    })
  })

  document.querySelectorAll<HTMLInputElement>('input[name="note-min"]').forEach(e => {
    e.addEventListener("click", () => {
      minimalNote = e.value
      searchBox()
    })
  })

</script>