window.dataLayer = window.dataLayer || [];
const reservationPlugin = {
    settings : {
        elements : {}
    },
    init: function() {

        this.settings.elements.script = document.querySelector("script#newicteaReservation");
        this.settings.scriptBase = this.settings.elements.script.src.replace("/reservation/integration","");
        this.settings.vehicleID = this.settings.elements.script.dataset.id;


        if (location.hash.match("transactionID")) {
            reservationPlugin.settings.transactionID = location.hash.match(/transactionID=(.*)/)[1];
            location.hash = "";
            this.build();
        } else {
            // Has no transactionID so check if possible
            fetch(`${this.settings.scriptBase}/reservation/${this.settings.vehicleID}`, {
                method : "HEAD"
            }).then(
                response => {

                    if (response.status === 200) {
                        this.build();

                        if (window.reservationFound) {
                            window.reservationFound();
                        }

                    } else {
                        if (window.reservationNotFound) {
                            window.reservationNotFound();
                        }
                    }

                }
            );
        }

        // Setup analytics
        let tracker = document.createElement("SCRIPT");
            tracker.async = true;
            tracker.src = "https://www.googletagmanager.com/gtag/js?id=G-0J96328GLM";
        document.body.appendChild(tracker);
 
        tracker.onload = () => {
            reservationPlugin.functions.gtag('js', new Date());
            reservationPlugin.functions.gtag('config', 'G-0J96328GLM');
        };

    },
    build: function() {

        let frameURL = `${this.settings.scriptBase}/reservation/${this.settings.vehicleID}`;
        if (reservationPlugin.settings.transactionID) {
            frameURL += `/transactionComplete/${reservationPlugin.settings.transactionID}`;
            reservationPlugin.settings.startOpen = true;
        }

        let wrapper = document.createElement("div");
        wrapper.classList.add("newictea-reservation-integration");
        wrapper.innerHTML = `<link rel="stylesheet" href="https://cms.newictea.nl/css/newictea-cdn/style_nit_reservation_integration.css" /><a class="newictea-reservation-hide">Terug naar voertuig</a><iframe id="newictea-reservation-frame"src="${frameURL}"></iframe>`;

        // Done, append wrapper to document
        this.settings.elements.script.parentElement.insertBefore(wrapper, this.settings.elements.script);
        this.settings.elements.wrapper = wrapper;
        this.settings.elements.hideButton = wrapper.querySelector("a.newictea-reservation-hide");

        // Start iframe resizer
/*
        if (typeof iFrameResize === "undefined") {
            // Load iFrameResize
            async("cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.min.js", function() {
                iFrameResize({ log: true }, 'iframe#newictea-reservation-frame');
            });

        } else {
            // Already has iFrameResize loaded
            iFrameResize({ log: true }, 'iframe#newictea-reservation-frame');

        }
*/

        // Build reservation button
        let customButton = document.querySelector(".newictea-reservation-custom");
        if (customButton) {
            // Custom button
            this.settings.elements.reserveButton = customButton;
        } else {
            let reserveButton = document.createElement("A");
                reserveButton.classList.add("newictea-reservation-reserve");
                reserveButton.innerHTML = `<span>Reserveer voertuig</span>`;

            reservationPlugin.settings.elements.script.parentElement.insertBefore(reserveButton, reservationPlugin.settings.elements.script);
            this.settings.elements.reserveButton = reserveButton;
        }


        if (reservationPlugin.settings.startOpen) {
                // There's a location hash with reservation=true. Show the reservation page
                document.body.classList.add("newictea-reservation-active");
                reservationPlugin.settings.elements.wrapper.classList.add("visible");
        }

        // Done, handlers
        this.handlers();
    },
    handlers: function() {

        this.settings.elements.reserveButton.addEventListener("click", (event) => {
            event.preventDefault();

            document.querySelector("html").classList.add("newictea-reservation-active");
            document.body.classList.add("newictea-reservation-active");
            reservationPlugin.settings.elements.wrapper.classList.add("visible");

        });

        this.settings.elements.hideButton.addEventListener("click", (event) => {
            event.preventDefault();

            document.querySelector("html").classList.remove("newictea-reservation-active");
            document.body.classList.remove("newictea-reservation-active");
            reservationPlugin.settings.elements.wrapper.classList.remove("visible");

        });

        // postMessage handler
        window.addEventListener("message", (event) => {
            if (event.data.gtm) {
                reservationPlugin.functions.gtag("event", event.data.gtm.name, event.data.gtm.data);
            }
            if (event.data.url) {
                location.href = event.data.url;
            }
            if (event.data.type === "getURL") {
                let pageURL = `${location.href}#transactionID={{id}}`;
                document.querySelector("iframe#newictea-reservation-frame").contentWindow.postMessage({ "pageURL" : pageURL}, "*");
            }
        }, false);

    },
    functions : {
        gtag : function(){
            dataLayer.push(arguments);
        }
    }
};

document.addEventListener('DOMContentLoaded', function() {
    reservationPlugin.init();
});


function async(u, c) {
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = '//' + u;
  if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
  s.parentNode.insertBefore(o, s);
}