// Neutralizar smooth scroll de Divi en esta página
document.documentElement.style.scrollBehavior = 'auto';
document.body.style.scrollBehavior = 'auto';
document.addEventListener('DOMContentLoaded', function(){
    const container = document.querySelector('.property-single-container');
    const ref = container.dataset.ref;
    setLeadGenerated(ref);

    zoddakSendStats({
        ref: ref,
        event: 'property_view'
    })
    sendContactformStat(ref);
    const propMap = document.getElementById('property-map');
    if(!propMap) return;
    const lng = propMap.dataset.lng; 
    const lat = propMap.dataset.lat;
    const radius = 200;
    const mapEl = document.getElementById("property-map");
    const map = L.map(mapEl).setView([lat, lng], 16.5);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "&copy; OpenStreetMap contributors"
    }).addTo(map);
    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);
    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');
    // if(!langSwitcher) return;
    // 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 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;
        box.addEventListener('click', () => {
            const unitId = box.dataset.unitId;
            // zoddakSendStats({
            //     ref: ref,
            //     event: `box_unit_click`,
            //     extraData: `beds: ${beds}`
            // })
        })
    })
}

function setLeadGenerated(ref){
    document.addEventListener('wpcf7mailsent', function(event){
        zoddakSendStats({
            ref: ref,
            event: 'generated_lead',
        })
    })
}
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,
    });
}
