const lat = document.getElementById('property-map').getAttribute('data-lat');
const lng = document.getElementById('property-map').getAttribute('data-lng');
const radius = 750; // radio en metros
document.addEventListener('DOMContentLoaded', function(){
    const container = document.querySelector('.property-single-container');
    const ref = container.dataset.ref;
    zoddakSendStats({
        ref: ref,
        event: 'property_view'
    })
    sendContactformStat(ref);
    const mapEl = document.getElementById("property-map");
    const map = L.map(mapEl).setView([lat, lng], 15);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "&copy; OpenStreetMap contributors"
    }).addTo(map);

    L.circle([lat, lng], {
        color: "#d9534f",
        radius: radius
    }).addTo(map);

    const visibleThumbs = 12;
    const thumbsSwiper = new Swiper(".thumbs-swiper", {
        slidesPerView: visibleThumbs,
        spaceBetween: 10,
        watchSlidesProgress: true,
        slideToClickedSlide: true,
    });

    const mainSwiper = new Swiper(".main-swiper", {
        spaceBetween: 10,
        navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
        effect: "fade",
        fadeEffect: { crossFade: true },
        thumbs: { swiper: thumbsSwiper },
        on: {
            slideChange() {
                
                const activeIndex = this.activeIndex;
                const thumbs = thumbsSwiper;
                if (activeIndex < thumbs.activeIndex || activeIndex >= thumbs.activeIndex + visibleThumbs) {
                    thumbs.slideTo(activeIndex);
                }

                thumbs.slides.forEach((slide, i) => {
                    slide.classList.toggle('thumb-active', i === activeIndex);
                });
            },
        },
    });

    thumbsSwiper.slides[0]?.classList.add('thumb-active');
    document.querySelectorAll(".box-outter").forEach(header => {
        header.addEventListener("click", () => {
        header.classList.toggle("active");
        const collapse = header.nextElementSibling;

        if (header.classList.contains("active")) {
            collapse.style.maxHeight = collapse.scrollHeight + "px";
            collapse.style.opacity = "1";
        } else {
            collapse.style.maxHeight = "0";
            collapse.style.opacity = "0";
        }
        });
    });
    const langSwitcher = document.getElementById('langSwitcher');
    langSwitcher.addEventListener('change', function(e){
        const value = e.target.value;
        window.location = value;
    })
})

function sendContactformStat(ref){
    const submitForm =  document.querySelector('.wpcf7-submit');
    if(!submitForm) return;
    submitForm.addEventListener('click', () => {
        zoddakSendStats({
            ref: ref,
            event: 'contact_form_submit'
        })
    })
}

function sendGalleryActivityStats(ref)
{
    const btnNext = document.querySelector('.swiper-button-next');
    const btnPrev = document.querySelector('.swiper-button-prev');
    if(!btnNext || !btnPrev) return;

    btnNext.addEventListener('click', () => {
        zoddakSendStats({
            ref: ref,
            event: 'gallery_next_click'
        })
    })
    btnPrev.addEventListener('click', () => {
        zoddakSendStats({
            ref: ref,
            event: 'gallery_prev_click'
        })
    })
}

function scrollStat(ref){
    let scrollStatSent = false;
    window.addEventListener('scroll', function(){
        if(scrollStatSent) return;

        const scrollTop = window.scrollY;
        const docHeight = document.documentElement.scrollHeight;
        const winHeight = window.innerHeight;

        const scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;

        if(scrollPercent >= 50){
            scrollStatSent = true;

            zoddakSendStats({
                ref: ref,
                event: 'scroll_50'
            })
        }
        return scrollStatSent;
    })
}

function sendMapSeenStat(ref){
    let mapSeenStatSent = false;
    const mapEl = document.getElementById('property-map');
    
    window.addEventListener('scroll', function(){
        const mapPosition = mapEl.getBoundingClientRect();
        if(mapSeenStatSent) return;
        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
        if(mapPosition.top >= 0 && mapPosition.bottom <= windowHeight){
            mapSeenStatSent = true;
            zoddakSendStats({
                ref: ref,
                event: 'map_seen'
            })
        }
        return mapSeenStatSent;
    })
}

function sendBoxUnitsStats(ref){
    const boxUnits = document.querySelectorAll('.box-outter');
    boxUnits.forEach(box => {
        const beds = box.dataset.beds;
        console.log(beds);
        box.addEventListener('click', () => {
            const unitId = box.dataset.unitId;
            zoddakSendStats({
                ref: ref,
                event: `box_unit_click`,
                extraData: `beds: ${beds}`
            })
        })
    })
}

function initMap() {
    const mapEl = document.getElementById("property-map");
    const lat = parseFloat(mapEl.dataset.lat);
    const lng = parseFloat(mapEl.dataset.lng);
    const radius = 200;
    if (isNaN(lat) || isNaN(lng)) {
        return;
    }
    const map = new google.maps.Map(mapEl, {
        center: { lat, lng },
        zoom: 16.5,
        gestureHandling: "none",
        zoomControl: false,
        fullscreenControl: false,
        streetViewControl: false,
        mapTypeControl: false,
    });

    new google.maps.Circle({
        strokeColor: "#d9534f",
        fillOpacity: 0.35,
        map,
        center: { lat, lng },
        radius: 200,
    });
}
