const overlay = document.getElementById("overlay");
const popup = document.getElementById("popup");
const donateButton = document.getElementById("donate-button");

function showPopup(_eggID, egg) {
    overlay.style.display = "block";
    popup.style.display = "block";

    let eggPreview = document.getElementById('egg-preview');
    eggPreview.innerHTML = "";
    eggPreview.appendChild(egg);
    egg.style.width = '60px';
    egg.style.height = '80px';
    egg.style.fontSize = '16px';
    egg.style.top = "";
    egg.style.left = "";
    egg.style.transform = "";
    egg.style.position = "relative";

    while (donateButton.firstChild) {
        donateButton.removeChild(donateButton.firstChild);
    }

    if (!donateButton.hasChildNodes()) {
        PayPal.Donation.Button({
            custom: _eggID,
            env: 'production',
            hosted_button_id: 'ZUT5XGKP4FJ7Q',
            image: {
                src: 'https://www.paypalobjects.com/de_DE/DE/i/btn/btn_donateCC_LG.gif',
                alt: 'Spende für den Tierschutzverein Eisenach und Umgebung e.V.',
                title: 'Tierschutzverein Eisenach und Umgebung e.V.',
            },
            onComplete: function (params) {
                // Erhalte die Origin (Domain) der aktuellen Seite
                const origin = window.location.origin;

                // Sende den POST-Request an die gleiche Origin
                fetch(`${origin}/api/thankyou`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',  // Setze den Content-Type auf JSON
                    },
                    body: JSON.stringify({
                        params: params
                    })
                })
                    .then(data => {
                        console.log(data);
                        setInterval(()=>{
                            window.location.href = '/tierheim-ea-spende/thankyou.html';
                        }, 1000);
                    })
                    .catch(error => {
                        console.error(error);
                        window.location.reload();
                    })
                    .finally(() => {
                        setTimeout(()=>{
                            window.location.reload();
                        }, 8000);
                    });

            }
        }).render('#donate-button');
    }
}



function hidePopup() {
    overlay.style.display = "none";
    popup.style.display = "none";
}

function fillBasket() {
    fetch(window.location.origin + "/api/getEggs")
        .then((response) => response.json())
        .then(eggs => {
            displayEggs(eggs);
        })
        .catch(error => {
            alert(error);
        });

    function displayEggs(eggs) {

        const baskets = document.querySelectorAll('.basket-shape');
        const tree = document.querySelector('.tree');

        // Eier in die Körbe verteilen
        for (let i = 0; i < eggs.length; i++) {

            const easterEgg = {
                ID: eggs[i].eggID,
                eggTop: eggs[i].eggTop,
                eggLeft: eggs[i].eggLeft,
                basket: eggs[i].basket,
                backgroundColor: eggs[i].backgroundColor,
                eggRotate: eggs[i].eggRotate
            }

            const egg = document.createElement('div');
            const eggID = document.createElement('span');

            const eggContainer = document.createElement('div');
            eggID.innerHTML = "# " + easterEgg.ID;
            egg.className = 'egg';
            eggContainer.className = 'eggContainer';
            egg.addEventListener('click', (event) => {
                event.preventDefault();
                const eggClone = egg.cloneNode(true);
                showPopup(easterEgg.ID, eggClone);
            });

            const basket = baskets[easterEgg.basket];
            const basketRect = basket.getBoundingClientRect();

            egg.style.userSelect = "none";
            egg.style.touchAction = "none";

            egg.style.top = `${easterEgg.eggTop}px`;
            egg.style.left = `${easterEgg.eggLeft}px`;

            egg.style.backgroundColor = `hsl(${easterEgg.backgroundColor}, 70%, 70%)`;

            egg.style.transform = `scale(1.0) rotate(${easterEgg.eggRotate}deg)`;
            egg.onmouseover = () => {
                egg.style.transform = `scale(2.5)`;
            };

            egg.onmouseleave = () => {
                egg.style.transform = `scale(1.0) rotate(${easterEgg.eggRotate}deg)`;
            };

            egg.appendChild(eggID);
            basket.appendChild(egg);
        }
    }
}

function initialize() {
    const basketPanoID = [
        "CAoSLEFGMVFpcFBBZG8yOHBrYVVySGU3SloxeHVvbFhaV3pMSUROSW5NVy04dWk1",
        "CAoSLEFGMVFpcE5yMGQ5dEJVY1k1ekhpNGpLdlJJaXFPbEJSVnF0YV82Mjh5VjhL"
    ]

    fillBasket();
    // const startPosition = { lat: 50.975561367373096, lng: 10.326072058855347 };
    //Tierheim
    const startPosition = { lat: 50.97512577154884, lng: 10.371761960036137 };

    // Erstelle die Map
    const map = new google.maps.Map(document.getElementById("map"), {
        center: startPosition,
        zoom: 0
    });

    // Erstelle das Street View Panorama
    let panorama = new google.maps.StreetViewPanorama(
        document.getElementById("street-view"),
        {
            position: startPosition,
            pov: { heading: 0, pitch: 0 },
            zoomControl: false,
            scrollwheel: false,
            disableDefaultUI: true,
        }
    );

    // Verknüpfe Street View mit der Map
    map.setStreetView(panorama);

    // Custom Overlay-Klasse
    class CustomStreetViewOverlay extends google.maps.OverlayView {
        constructor(position, overlayId) {
            super();
            this.position = position;
            this.overlayId = overlayId;
            this.div = null;
        }

        onAdd() {
            const div = document.createElement('div');
            div.style.position = 'absolute';
            const basket = document.getElementById(this.overlayId);
            basket.style.display = 'block';
            div.appendChild(basket);
            this.div = div;

            // Füge das Overlay in das Pane ein
            const panes = this.getPanes();
            panes.overlayLayer.appendChild(div);

            this.draw();
        }

        draw() {
            const projection = this.getProjection();

            if (!projection) return;
            if (!this.position) return;

            let pixelPosition = projection.fromLatLngToDivPixel(this.position);
            if (!pixelPosition) {
                pixelPosition = {}
                pixelPosition.x = pixelPosition.y = -1000;

            }


            if (this.div) {
                this.div.style.left = `${pixelPosition.x}px`;
                this.div.style.top = `${pixelPosition.y + 50}px`;
                if (document.getElementById('overlay-position')) document.getElementById('overlay-position').innerHTML = pixelPosition;
            }

        }

        onRemove() {
            document.getElementById('basket-1').style = 'display:none';
            document.getElementById('basket-2').style = 'display:none';
            document.getElementById('basket-3').style = 'display:none';
            document.getElementById('wak-lab').style = 'display:none';
            document.getElementById('dog').style = 'display:none';
            document.getElementById('cat').style = 'display:none';
            if (this.div) {
                this.div = null;
            }
        }
    }

    let customOverlay = [];
    checkOverlayView();

    // Street View-Listener zur Anzeige von Status-Informationen
    panorama.addListener("pano_changed", () => {
        if (document.getElementById("pano-id")) document.getElementById("pano-id").innerHTML = panorama.getPano();
        checkOverlayView();
    });

    panorama.addListener("position_changed", () => {
        if (document.getElementById("pano-position")) document.getElementById("pano-position").innerHTML = panorama.getPosition();
        if (customOverlay[0]) customOverlay[0].draw();
        if (customOverlay[1]) customOverlay[1].draw();
        if (customOverlay[2]) customOverlay[2].draw();
        if (customOverlay[3]) customOverlay[3].draw();
        if (customOverlay[4]) customOverlay[4].draw();
        if (customOverlay[5]) customOverlay[5].draw();
    });

    panorama.addListener("pov_changed", () => {

        if (document.getElementById("pano-pov")) document.getElementById("pano-pov").innerHTML = `${pov.heading} ${pov.pitch}`;
        if (customOverlay[0]) customOverlay[0].draw();
        if (customOverlay[1]) customOverlay[1].draw();
        if (customOverlay[2]) customOverlay[2].draw();
        if (customOverlay[3]) customOverlay[3].draw();
        if (customOverlay[4]) customOverlay[4].draw();
        if (customOverlay[5]) customOverlay[5].draw();
    });

    function checkOverlayView() {
        for (let index = 0; index < customOverlay.length;
            index++) {
            let customOverlayElem = customOverlay[index];
            if (customOverlayElem) {
                customOverlayElem.setMap(null);
                customOverlayElem = null;
            }

        }

        if (panorama.getPano() === basketPanoID[0]) {
            const position = new google.maps.LatLng(startPosition.lat, startPosition.lng + +0.0001);
            customOverlay[0] = new CustomStreetViewOverlay(position, 'basket-1');
            customOverlay[0].setMap(panorama);
        }
        if (panorama.getPano() === basketPanoID[0]) {
            const position = new google.maps.LatLng(25, 55);
            customOverlay[1] = new CustomStreetViewOverlay(position, 'basket-2');
            customOverlay[1].setMap(panorama);
        }
        if (panorama.getPano() === basketPanoID[0]) {
            const position = new google.maps.LatLng(120, 25);
            customOverlay[2] = new CustomStreetViewOverlay(position, 'basket-3');
            customOverlay[2].setMap(panorama);
        }
        if (panorama.getPano() === basketPanoID[0]) {
            const position = new google.maps.LatLng(50, 50);
            customOverlay[3] = new CustomStreetViewOverlay(position, 'wak-lab');
            customOverlay[3].setMap(panorama);
        }
        if (panorama.getPano() === basketPanoID[0]) {
            const position = new google.maps.LatLng(25, 15);
            customOverlay[4] = new CustomStreetViewOverlay(position, 'dog');
            customOverlay[4].setMap(panorama);
        }
        if (panorama.getPano() === basketPanoID[0]) {
            const position = new google.maps.LatLng(60, 0);
            customOverlay[5] = new CustomStreetViewOverlay(position, 'cat');
            customOverlay[5].setMap(panorama);
        }
        // else {
        //     const position = new google.maps.LatLng(50.97560013354051, 10.326042981884981);
        //     customOverlay = new CustomStreetViewOverlay(position, 'basket - 1');
        //     customOverlay.setMap(panorama);
        // }
        if (customOverlay[0]) customOverlay[0].draw();
        if (customOverlay[1]) customOverlay[1].draw();
        if (customOverlay[2]) customOverlay[2].draw();
        if (customOverlay[3]) customOverlay[3].draw();
        if (customOverlay[4]) customOverlay[4].draw();
        if (customOverlay[5]) customOverlay[5].draw();
    }
}

window.initialize = initialize;