import { tools } from '@tools'
import { useQuasar } from 'quasar'
import { PropType, defineComponent, onMounted, ref, computed, nextTick, shallowRef } from 'vue'

import 'leaflet/dist/leaflet.css'
// @ts-ignore
import * as L from 'leaflet'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster'
import '../../utils/leaflet-extensions'; // Importa le estensioni

import { useUserStore } from '@src/store/UserStore'
import { useGlobalStore } from '@src/store/globalStore'
import { setCookie } from '@src/utils/auth'

export default defineComponent({
  name: 'CMapComuni',
  setup(props, { emit }) {
    const $q = useQuasar()
    const userStore = useUserStore()
    const globalStore = useGlobalStore()

    const iconWidth = ref(25)
    const iconHeight = ref(40)
    const map = shallowRef(<any>null)
    const zoom = ref(6)
    const center = ref(<any>[42.71, 12.934])
    const arrprovince = ref(<any>[])

    const visumappa = ref(true)

    const comuniData = ref(<any>{})
    const mappacaricata = ref(false)

    const initialMap = ref(<any>null);

    const myIcon = L.icon({
      iconUrl: 'images/icon.png',
      iconSize: [30, 30],
      iconAnchor: [22, 35],
      popupAnchor: [-6, -36],
      shadowUrl: 'images/marker-shadow.png',
      shadowSize: [60, 30],
      shadowAnchor: [22, 35]
    });

    function mywidth() {
      return tools.getwidth($q) - 20
    }

    function myheight() {
      return $q.screen.height - 50
    }

    const iconSize = computed(() => {
      return [iconWidth.value, iconHeight.value];
    })

    function changeIcon() {
      iconWidth.value += 2;
      if (iconWidth.value > iconHeight.value) {
        iconWidth.value = Math.floor(iconHeight.value / 2);
      }
    }

    function getColor(d: any) {
      return d > 500 ? '#800026' :
        d > 200 ? '#BD0026' :
          d > 100 ? '#E31A1C' :
            d > 50 ? '#FC4E2A' :
              d > 20 ? '#FD8D3C' :
                d > 10 ? '#FEB24C' :
                  d > 0 ? '#FED976' :
                    '#FFEDA0';
    }

    function styleFunctionBasic(feature: any) {
      return {
        fillColor: 'blue',
        color: 'black',
        weight: 1,
        opacity: 0.7,
        fillOpacity: 0.5
      };
    }

    function styleFunction(feature: any) {
      // Qui verrà implementata la logica per determinare il colore basato sul numero di utenti
      // esempio semplice:
      const userCount = getUserCountForProv(feature.properties.prov); // Assicurati di implementare getUserCountForComune
      const density = userCount / feature.properties.area; // supponendo che 'area' sia un campo esistente
      return {
        fillColor: getColor(density),
        weight: 2,
        opacity: 1,
        color: 'white',
        fillOpacity: 0.7
      };
    }

    function getUserCountForComune(comuneName: string) {
      // Implementa questa funzione per ottenere il numero di utenti per il dato comune
      // Si può utilizzare una richiesta a un API o una mappa locale, a seconda di come sono archiviati i dati
      const trovataprov = arrprovince.value.find((prov: any) => prov.descr === comuneName)
      if (trovataprov) {
        return trovataprov.userCount
      }

      return 0; // stub, implementazione di esempio
    }
    function getUserCountForProv(prov: string) {
      // Implementa questa funzione per ottenere il numero di utenti per il dato comune
      // Si può utilizzare una richiesta a un API o una mappa locale, a seconda di come sono archiviati i dati
      const trovataprov = arrprovince.value.find((prov: any) => prov.prov === prov)
      if (trovataprov) {
        return trovataprov.userCount
      }

      return 0; // stub, implementazione di esempio
    }

    onMounted(async () => {
      // Ottengo la lista degli utenti con i lat e long
      arrprovince.value = await userStore.getProvincesForMap()

      comuniData.value = await globalStore.getGeoJsonByProvince('RN')

      /*
      comuniData.value = [{
        "type": "Feature", "properties":
        {
          "cartodb_id": 7668,
          "comune": "Bellaria-Igea Marina",
          "ISTAT": 99001
        },
        "geometry": {
          "type": "MultiPolygon",
          "coordinates":
            [
              [[
                [12.44976, 44.162465], [12.450616, 44.162224],
                [12.458681, 44.155807], [12.478901, 44.138932],
                [12.483937, 44.134279], [12.488855, 44.129281],
                [12.491881, 44.126121], [12.494282, 44.123739],
                [12.501596, 44.117209], [12.503714, 44.115562],
                [12.49573, 44.110561], [12.489229, 44.108419],
                [12.484759, 44.108458], [12.483431, 44.109019],
                [12.476477, 44.109618], [12.468653, 44.109789],
                [12.460359, 44.108605], [12.455907, 44.108502],
                [12.452866, 44.108595], [12.45264, 44.108666],
                [12.45259, 44.108682], [12.452496, 44.109073],
                [12.452396, 44.109587], [12.453329, 44.110754],
                [12.453329, 44.112248], [12.45229, 44.114656],
                [12.449993, 44.118642], [12.44721, 44.122138],
                [12.44525, 44.12389], [12.444805, 44.123336],
                [12.444356, 44.123143], [12.443879, 44.12331],
                [12.443467, 44.12353], [12.441217, 44.125029],
                [12.439389, 44.127569], [12.439426, 44.12971],
                [12.439538, 44.131422], [12.439637, 44.132472],
                [12.439961, 44.135892], [12.440291, 44.136846],
                [12.441244, 44.138402], [12.441893, 44.139246],
                [12.442357, 44.139916], [12.442546, 44.140199],
                [12.442645, 44.140349], [12.442018, 44.140746],
                [12.437704, 44.142884], [12.435929, 44.143756],
                [12.433716, 44.144822], [12.429921, 44.146674],
                [12.42872, 44.147345], [12.428912, 44.147595],
                [12.43948, 44.158162]
              ]
              ]]
        }
      }]*/


      /*
      comuniData.value = [{ "type": "Feature", "properties": { "cartodb_id": 7668, "comune": "Bellaria-Igea Marina", "ISTAT": 99001 }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[12.44976, 44.162465], [12.450616, 44.162224], [12.458681, 44.155807], [12.478901, 44.138932], [12.483937, 44.134279], [12.488855, 44.129281], [12.491881, 44.126121], [12.494282, 44.123739], [12.501596, 44.117209], [12.503714, 44.115562], [12.49573, 44.110561], [12.489229, 44.108419], [12.484759, 44.108458], [12.483431, 44.109019], [12.476477, 44.109618], [12.468653, 44.109789], [12.460359, 44.108605], [12.455907, 44.108502], [12.452866, 44.108595], [12.45264, 44.108666], [12.45259, 44.108682], [12.452496, 44.109073], [12.452396, 44.109587], [12.453329, 44.110754], [12.453329, 44.112248], [12.45229, 44.114656], [12.449993, 44.118642], [12.44721, 44.122138], [12.44525, 44.12389], [12.444805, 44.123336], [12.444356, 44.123143], [12.443879, 44.12331], [12.443467, 44.12353], [12.441217, 44.125029], [12.439389, 44.127569], [12.439426, 44.12971], [12.439538, 44.131422], [12.439637, 44.132472], [12.439961, 44.135892], [12.440291, 44.136846], [12.441244, 44.138402], [12.441893, 44.139246], [12.442357, 44.139916], [12.442546, 44.140199], [12.442645, 44.140349], [12.442018, 44.140746], [12.437704, 44.142884], [12.435929, 44.143756], [12.433716, 44.144822], [12.429921, 44.146674], [12.42872, 44.147345], [12.428912, 44.147595], [12.43948, 44.158162], [12.441116, 44.159625], [12.441631, 44.159888], [12.447979, 44.161947], [12.44976, 44.162465]]]] }, "id": '1' },
      { "type": "Feature", "properties": { "cartodb_id": 7686, "comune": "Casteldelci", "ISTAT": 99021 }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[12.151102, 43.832151], [12.154073, 43.832875], [12.154686, 43.832948], [12.155309, 43.832967], [12.155892, 43.832942], [12.156276, 43.832904], [12.156644, 43.832822], [12.157147, 43.832691], [12.157548, 43.832567], [12.15784, 43.832383], [12.158036, 43.831905], [12.15809, 43.831472], [12.158096, 43.831156], [12.158054, 43.830847], [12.157944, 43.830643], [12.157706, 43.83037], [12.157421, 43.83009], [12.157035, 43.829619], [12.156791, 43.829288], [12.156815, 43.828991], [12.157038, 43.828548], [12.16088, 43.82412], [12.161093, 43.82393], [12.161407, 43.823736], [12.162315, 43.823333], [12.162915, 43.823163], [12.165225, 43.822874], [12.165858, 43.822906], [12.166489, 43.823028], [12.167551, 43.82317], [12.167967, 43.823221], [12.168638, 43.823221], [12.169137, 43.823063], [12.169238, 43.822983], [12.169769, 43.822568], [12.170123, 43.822203], [12.171574, 43.820065], [12.172195, 43.819125], [12.172841, 43.817936], [12.174926, 43.813935], [12.176541, 43.810541], [12.175856, 43.81029], [12.174987, 43.809864], [12.171146, 43.80794], [12.170915, 43.807749], [12.1707, 43.807502], [12.170534, 43.807267], [12.17046, 43.807159], [12.1703, 43.806923], [12.170233, 43.806808], [12.170052, 43.806427], [12.169935, 43.805975], [12.169796, 43.805344], [12.169755, 43.804625], [12.172752, 43.79566], [12.17834, 43.787434], [12.183274, 43.782515], [12.184189, 43.7815], [12.184524, 43.780797], [12.184576, 43.780363], [12.184575, 43.779643], [12.184589, 43.778508], [12.18466, 43.776044], [12.184691, 43.775579], [12.184772, 43.775444], [12.18493, 43.775195], [12.185221, 43.774817], [12.185565, 43.774515], [12.18614, 43.77413], [12.186764, 43.773924], [12.197778, 43.770631], [12.198509, 43.770476], [12.199348, 43.770376], [12.19938, 43.77026], [12.199458, 43.76992], [12.199452, 43.769868], [12.199278, 43.769396], [12.199017, 43.768701], [12.198418, 43.767255], [12.198333, 43.76705], [12.198195, 43.766789], [12.198043, 43.766559], [12.197909, 43.766378], [12.197748, 43.766166], [12.197571, 43.765874], [12.197474, 43.765688], [12.19743, 43.765491], [12.197421, 43.76532], [12.197444, 43.765121], [12.197641, 43.764625], [12.197858, 43.764025], [12.19787, 43.763962], [12.197935, 43.763555], [12.198007, 43.763148], [12.198076, 43.762754], [12.198137, 43.762509], [12.19816, 43.762229], [12.198245, 43.761975], [12.198311, 43.76164], [12.198337, 43.761356], [12.198236, 43.761097], [12.198112, 43.760871], [12.197873, 43.760635], [12.197615, 43.760462], [12.196151, 43.759747], [12.194993, 43.759216], [12.194614, 43.759092], [12.194329, 43.758875], [12.194213, 43.758626], [12.195958, 43.747895], [12.196035, 43.747708], [12.196945, 43.745909], [12.197137, 43.745557], [12.197488, 43.745025], [12.197665, 43.744811], [12.200649, 43.74129], [12.200584, 43.740527], [12.200559, 43.74032], [12.200472, 43.74008], [12.200352, 43.73975], [12.199463, 43.73765], [12.199243, 43.737355], [12.194633, 43.731924], [12.191569, 43.734783], [12.184892, 43.741861], [12.184642, 43.742075], [12.184245, 43.742289], [12.178433, 43.744999], [12.171172, 43.751661], [12.171077, 43.751825], [12.170872, 43.752178], [12.16949, 43.754435], [12.164582, 43.761562], [12.164048, 43.762261], [12.16367, 43.762362], [12.162664, 43.762408], [12.16166, 43.762355], [12.160619, 43.761956], [12.152521, 43.758718], [12.148546, 43.75592], [12.148184, 43.755538], [12.147547, 43.754993], [12.146919, 43.754564], [12.145876, 43.754035], [12.142992, 43.752926], [12.142081, 43.752604], [12.141148, 43.752414], [12.126008, 43.749426], [12.125209, 43.749291], [12.124725, 43.749223], [12.124203, 43.749183], [12.123578, 43.749151], [12.122792, 43.749334], [12.110378, 43.752563], [12.108554, 43.753063], [12.107446, 43.753771], [12.105919, 43.755908], [12.105292, 43.756762], [12.104674, 43.757544], [12.104521, 43.757701], [12.104166, 43.758044], [12.104044, 43.758142], [12.103736, 43.758371], [12.102252, 43.759456], [12.101239, 43.76005], [12.10081, 43.760395], [12.099288, 43.761958], [12.096191, 43.765304], [12.096175, 43.765881], [12.096203, 43.766202], [12.096285, 43.76655], [12.096518, 43.767208], [12.100138, 43.775179], [12.100589, 43.776157], [12.102859, 43.788276], [12.102676, 43.788653], [12.102595, 43.78913], [12.102488, 43.790285], [12.102469, 43.790493], [12.102677, 43.791649], [12.102893, 43.792271], [12.103632, 43.793558], [12.10409, 43.794117], [12.105007, 43.795071], [12.107692, 43.796126], [12.108094, 43.796244], [12.112737, 43.796434], [12.117102, 43.803822], [12.116581, 43.804302], [12.116208, 43.804796], [12.116133, 43.805361], [12.120222, 43.812821], [12.120593, 43.813486], [12.120899, 43.813883], [12.121089, 43.814129], [12.121457, 43.814558], [12.12167, 43.814791], [12.130804, 43.824759], [12.139978, 43.827569], [12.140643, 43.827686], [12.144574, 43.828613], [12.145285, 43.828818], [12.145698, 43.828952], [12.146209, 43.829216], [12.147071, 43.829769], [12.147723, 43.830364], [12.148316, 43.830995], [12.148521, 43.831349], [12.148855, 43.831968], [12.149468, 43.833295], [12.151102, 43.832151]]]] }, "id": '2' }
      ]*/

      console.log(comuniData.value)

      await nextTick(); // Wait for the next DOM update cycle

      let lat = tools.getCookie(tools.COOK_MAP_CENTER_LAT, 42.71)
      let lng = tools.getCookie(tools.COOK_MAP_CENTER_LONG, 12.934)
      center.value = { lat, lng }
      zoom.value = tools.getCookie(tools.COOK_MAP_ZOOM, zoom.value)

      initialMap.value = L.map('map',
        {
          zoomControl: true, zoom: zoom.value, zoomAnimation: true,
          fadeAnimation: true, markerZoomAnimation: true,
          center: center.value,
        }
      );
      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 15,
        attribution: ''
      }).addTo(initialMap.value);

      let crownHill = L.marker([43.87364, 12.472438]).bindPopup('This is Crown Hill Park.'),
        rubyHill = L.marker([43.87364, 12.482438]).bindPopup('This is Ruby Hill Park.');

      let parks = L.layerGroup([crownHill, rubyHill]);

      let layerControl = L.control.layers().addTo(initialMap.value);

      const MyCustomControl = L.Control.extend({
        options: {
          position: 'topright', // default
          // Puoi aggiungere qui altre opzioni se necessario
        },

        onAdd: function (map: any) {
          // Crea un container DOM per il tuo controllo
          const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');

          // Puoi configurare il tuo container come preferisci, incluso il suo aspetto
          container.style.backgroundColor = 'white';
          // container.style.backgroundImage = 'url('path_to_your_icon.png')"; // Optional: uso di un'icona personalizzata
          container.style.backgroundSize = '100px 30px';
          container.style.width = '100px';
          container.style.height = '30px';

          // Crea un elemento di testo e personalizza il suo stile
          const buttonText = L.DomUtil.create('div', 'button-text', container);
          buttonText.innerText = 'Torna alla Lista';
          buttonText.style.margin = '4px'; // Esempio di stile aggiuntivo


          // Gestione del click sul bottone
          container.onclick = function () {
            console.log('Il bottone è stato cliccato!');
            visumappa.value = !visumappa.value
            // Qui puoi inserire la tua logica da eseguire al click del bottone
          }

          return container;
        }
      });

      initialMap.value.addControl(new MyCustomControl());

      layerControl.addOverlay(parks, 'Parks');

      // Gestione dell'evento moveend
      initialMap.value.on('moveend', () => {
        center.value = initialMap.value.getCenter();
        zoom.value = initialMap.value.getZoom();
        console.log(`Nuovo centro della mappa: ${center.value.lat}, ${center.value.lng}`);

        // Puoi fare altre operazioni qui, come aggiornare lo stato della tua app con il nuovo centro
        aggiornaStatoMappa()
      });

      const geojsonLayer = L.geoJSON(comuniData.value, {
        style: styleFunction,
        pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, { radius: 8 });
        }
      }).addTo(initialMap.value);


    });

    function aggiornaStatoMappa() {
      console.log('center.value', center.value)
      tools.setCookie(tools.COOK_MAP_CENTER_LAT, center.value.lat.toString())
      tools.setCookie(tools.COOK_MAP_CENTER_LONG, center.value.lng.toString())
      tools.setCookie(tools.COOK_MAP_ZOOM, zoom.value.toString())
    }


    function log(str: string) {
      console.log(str)
    }

    function getCoordinates(e: any) {
      // Ottieni la latitudine e la longitudine dal click
      const lat = e.latlng.lat
      const lng = e.latlng.lng

      // Fai qualcosa con le coordinate, ad esempio stamparle in console
      console.log(`Latitudine: ${lat}, Longitudine: ${lng}`)
    }

    function tornaALista() {

    }

    return {
      mywidth,
      myheight,
      map,
      iconWidth,
      iconHeight,
      iconSize,
      changeIcon,
      zoom,
      center,
      log,
      styleFunction,
      styleFunctionBasic,
      getCoordinates,
      arrprovince,
      comuniData,
      initialMap,
      mappacaricata,
      tornaALista,
      visumappa,
    }
  }
})