/// <reference path="../Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../typings/google.maps.d.ts" />
function printMapControl(map) {
    "use strict";
    if (!isCanvasSupported()) {
        return null;
    }
    var controlDiv = printMapButton("Print", "printMap");
    google.maps.event.addDomListener(controlDiv, "click", function () {
        printMap(map);
    });
    return controlDiv;
}

function isCanvasSupported() {
    "use strict";
    var elem = document.createElement("canvas");
    return !!(elem.getContext && elem.getContext("2d"));
}

function printMap(map) {
    "use strict";
    var mapControlVisible = map.mapTypeControl;
    var zoomVisible = map.zoomControl;
    var streetViewVisible = map.streetViewControl;
    var panVisible = map.panControl;
    var fullscreenVisible = map.fullscreenControl;
    map.setOptions({
        mapTypeControl: false,
        zoomControl: false,
        streetViewControl: false,
        panControl: false,
        fullscreenControl: false
    });
    map.controls.forEach(function (array) {
        array.forEach(function (elem) {
            $(elem).hide();
        });
    });
    clearMarkerClusterer();

    var showControls = function () {
        map.setOptions({
            mapTypeControl: mapControlVisible,
            zoomControl: zoomVisible,
            streetViewControl: streetViewVisible,
            panControl: panVisible,
            fullscreenControl: fullscreenVisible
        });
        map.controls.forEach(function (array) {
            array.forEach(function (elem) {
                $(elem).show();
            });
        });
    };
    var popUpAndPrint = function () {
        try {
            // var dataUrl = [];
            // var container = map.getDiv();
            // $(container)
            //     .find("canvas")
            //     .filter(function () {
            //         dataUrl.push(this.toDataURL("image/png"));
            //     });
            // var clone = $(container).clone();
            // var width = container.clientWidth;
            // var height = container.clientHeight;
            // $(clone)
            //     .find("canvas")
            //     .each(function (i, item) {
            //         $(item)
            //             .replaceWith($("<img>")
            //                 .attr("src", dataUrl[i]))
            //             .css("position", "absolute")
            //             .css("left", "0")
            //             .css("top", "0")
            //             .css("width", width + "px")
            //             .css("height", height + "px");
            //     });
            // var printWindow = window.open("", "PrintMap", "width=" + width + ",height=" + height);
            // if (printWindow == null) {
            //     throw new Error("Unable to display the print dialog, you might need to allow popups on this site");
            // }
            // printWindow.document.writeln($(clone).html());
            // printWindow.document.close();
            // printWindow.focus();
            // printWindow.print();
            // printWindow.close();


            const $body = $('body');
            const $mapContainer = $('.map');
            const $mapContainerParent = $mapContainer.parent();
            const $printContainer = $('<div style="position:relative;">');

            $printContainer
                .height($mapContainer.height())
                .append($mapContainer)
                .prependTo($body);

            const $content = $body
                .children()
                .not($printContainer)
                .not('script')
                .detach();

            /**
             * Needed for those who use Bootstrap 3.x, because some of
             * its `@media print` styles ain't play nicely when printing.
             */
            const $patchedStyle = $('<style media="print">')
                .text(`
          img { max-width: none !important; }
          header{ display:none;}
          footer{ display:none;}
          .map{ width: 100vw;}
          .map{ height: 100vh;}
          a[href]:after { content: ""; }
        `)
                .appendTo('head');

            // window.print();

            $body.prepend($content);
            $mapContainerParent.prepend($mapContainer);

            // $printContainer.remove();
            // $patchedStyle.remove();

        }
        catch (error) {
            alert(error.message);
        }
        finally {
            // refreshMarkerClusterer();
            // showControls();
        }
    };
    setTimeout(popUpAndPrint, 500);
}

//
function printMapButton(text, className) {
    "use strict";
    var controlDiv = document.createElement("div");
    controlDiv.className = className;
    controlDiv.index = 1;
    controlDiv.style.padding = "10px";
    // set CSS for the control border.
    var controlUi = document.createElement("div");
    controlUi.style.backgroundColor = "rgb(255, 255, 255)";
    controlUi.style.color = "#565656";
    controlUi.style.cursor = "pointer";
    controlUi.style.textAlign = "center";
    controlUi.style.boxShadow = "rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px";
    controlDiv.appendChild(controlUi);
    // set CSS for the control interior.
    var controlText = document.createElement("div");
    controlText.style.fontFamily = "Roboto,Arial,sans-serif";
    controlText.style.fontSize = "11px";
    controlText.style.paddingTop = "8px";
    controlText.style.paddingBottom = "8px";
    controlText.style.paddingLeft = "8px";
    controlText.style.paddingRight = "8px";
    controlText.innerHTML = text;
    controlUi.appendChild(controlText);
    $(controlUi).on("mouseenter", function () {
        controlUi.style.backgroundColor = "rgb(235, 235, 235)";
        controlUi.style.color = "#000";
    });
    $(controlUi).on("mouseleave", function () {
        controlUi.style.backgroundColor = "rgb(255, 255, 255)";
        controlUi.style.color = "#565656";
    });
    return controlDiv;
}