// import $, { Callbacks } from 'jquery';
var $ = require("jquery");
import 'jquery-ui';
import * as I from "./types";
import Utils from './utils';
import * as communication from "./communication";
// import { getEventInfo } from './xml';
// var parseString = require('xml2js').parseString;
// import axios, { AxiosPromise, AxiosResponse, Method } from 'axios';
// import axios, { AxiosResponse } from 'axios';
// import * as xml from "./xml";
// import { parseStringPromise } from 'xml2js';
// const xml2js = require('xml2js');
// const util = require('util');
// var xml2jsParser = require('xml2js').parseString;

const config: I.Config = {
    debug: true,
    branch: "staging",
    urlSeatmapStaging: "https://staging.tickets.zinomedia.de",
    urlSeatmapMaster: "https://tickets.zinomedia.de",
    cssSeatmapMaster: "https://tickets.zinomedia.de/dist/style.css",
    cssSeatmapStaging: "https://staging.tickets.zinomedia.de/dist/style.css",
}
let inputsWithValue: I.InputsWithValue;

// const checkoutParams: string[] = [
//     'APPTE', 'age_consent_is_checked', 'agency', 'cancelAndRedirectTrxState', 'cogid', 'coids', 'discount=A=IE', 'discount=A=IV', 'discountdesc=A=IE', 'discountdesc=A=IV', 'discountfees=A=IE', 'discountfees=A=IV', 'discountprice=A=IE', 'discountprice=A=IV', 'dpa_selection', 'etpgcode', 'flashDetected', 'gid', 'hbx_discount_prices', 'hbx_discounts', 'hbx_offered_pg', 'hbx_perf_codes', 'hbx_perf_sub_codes', 'hbx_pids', 'hbx_requested_pg', 'hbx_selected_tixx', 'hbx_upsell_flag', 'request_type', 'invalid_seats', 'inventory_filtering_action', 'inventory_month', 'inventory_year', 'isCapEnabled', 'is_availability_switch_from_map', 'is_ticket_exchange_request', 'ism_map_current_state_json_data', 'jcarousel_auto_off_val', 'listing_type', 'mainEventPID', 'map_coupon_code', 'mlbamsp', 'oid', 'ooids', 'orderkey', 'orgid', 'p_orgid', 'package_pids', 'parent_offer_id', 'pay_pal_token', 'pid', 'prevtrxstate', 'recapToken', 'redeem_voucher_data_event_mapping', 'replay_request', 'request_action', 's_mem_tkt_ren_retrieval', 'schedule', 'secure_trxn_enabled', 'selected_seat_indexes', 'selected_upsell_option', 'supplierCode', 'supplier_code', 'target_name_value', 'target_prev_trxstate', 'target_trxstate', 'target_url', 'timeout_seconds', 'trxstate', 'upsell_selected', 'user_context', 'valid_coupon_code_message'
// ];
// const checkoutParamSerialized = encodeURIComponent(JSON.stringify(checkoutParams))


window.addEventListener('load', function () {
    const content: string = new XMLSerializer().serializeToString(document);
    getInputs(content);

    console.log(inputsWithValue["trxstate"]);
    console.log(/posturl:"(.+?)"/.test(content));

    // posturl absent if pvmapse === false
    if (inputsWithValue["trxstate"] !== "20" || /posturl:"(.+?)"/.test(content) === false)
        return;

    Utils.inject(config.cssSeatmapStaging, "css", "body");
    communication.listenToMessages(messagesHandler);
    getAdditionalInputs(content);
    console.log(inputsWithValue);
    getImportantNote();
    modifySeatmapButton();
    createDialog();

    jQuery("#getVenueXML").on("click", () => {    
        // const message: I.Message = {
        //     message: inputsWithValue,
        //     from: "parent",
        //     event: "sendInputsWithValue",
        //     date: Date.now()
        // };
        // communication.sendMessage(message, "iframeSeatmap")
        // communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "getEventInfo", "child");
    });
    jQuery("#foobarParent").on("click", () => {
        communication.sendEventToChild("parent_init_venue");
    });
});

function messagesHandler(e: any) {
    if (typeof (e.data) !== 'string')
        return;

    const data: I.Message = JSON.parse(e.data);
    console.log(`parent: received from ${data.from}`);
    console.log(data);


    switch (data.event) {
        case "child_init_needInputsWithValue": {
            const message: I.Message = {
                message: inputsWithValue,
                from: "parent",
                event: "parent_init_sendInputsWithValue",
                date: Date.now()
            };
            communication.sendMessage(message, "iframeSeatmap")
            break;
        }
        case "child_init_needVenueXML": {
            communication.sendXML(inputsWithValue["posturl"], "iframeSeatmap", "parent_init_sendVenueXML", "parent");
            break;
        }
        case "child_needSeatmapXML": {
            const seatmapUrl: string = generateSeatmapUrl(data.message);
            communication.sendXML(seatmapUrl, "iframeSeatmap", "parent_sendSeatmapXML", "parent");
            break;
        }

        default:
            break;
    }
}

function generateSeatmapUrl(seatmapId : string): string {
    return `${inputsWithValue["posturlRawDecoded"]}&inclseatmap=Y&seatmap=${seatmapId}`;
}


function getVenueLocation(): string {
    let span: string[] = [];
    jQuery(".venue span").each(function () {
        span.push(jQuery(this).text());
    });

    return span.join(", ");
}

function getInputs(inContent: string): void {
    const parsedHTML: Node[] = $.parseHTML(inContent);
    let inputs: { [key: string]: string } = {};

    $(parsedHTML).find('input').each(function (this: any) {
        const name: string = this.name;
        const value: string = this.value;
        if (value !== '')
            inputs[name] = value;
    });

    inputsWithValue = { ...inputsWithValue, ...inputs };
}


// todo: check with different venues
function getImportantNote(): void {
    const importantNote: string | null = $(".important_note")[0].textContent;

    if (importantNote?.trim().length) {
        const importantNoteEncoded: string = encodeURIComponent(importantNote);
        inputsWithValue["importantNote"] = importantNote;
        inputsWithValue["importantNoteEncoded"] = importantNoteEncoded;
    }
}

function createDialog(): void {
    jQuery("#dialogSeatmap").append($("<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' height='" + window.outerHeight + "px' />")
        .attr("src", "https://staging.tickets.zinomedia.de/"))
        .dialog({
            modal: true,
            autoOpen: false,
            closeOnEscape: true,
            draggable: false,
            hide: true,
            show: true,
            resizable: false,
            title: "Saalplanbuchung",
            width: "99%",
            height: "auto",
        });

    jQuery("#openSeatmap").on("click", () => {
        jQuery("#dialogSeatmap").dialog('open');
    });
}

function modifySeatmapButton(): void {
    $(".flash_seat_map_box").remove();
    $('#flash_seat_map_box_id').css({
        "display": "block",
        "position": "relative",
        "width": "100%"
    });
    $('#get_flash').css('display', 'none');
    $("#flash_seat_map_box_id").append(`
        <div style=
            'margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);'
        >
        <button type='button' id='openSeatmap'>Saalplanbuchung</button> <br/>
        <button type='button' id='foobarParent'>foobarParent</button> <br/>
        <button type='button' id='getVenueXML'>getVenueXML</button>
        <div id="dialogSeatmap" hidden="hidden"></div>
        </div>
        `);
}

// $(window).on('resize', function(): void{
//     console.log("resizing");
//     var win = $(this); //this = window

//     let dlg = $("#dialogSeatmap"); // Get the dialog container.
//     var width: number = <number>win.width();
//     var height: number = <number>win.height();

//     // Provide some space between the window edges.
//     width = width - 50;
//     height = height - 100; // iframe height will need to be even less to account for space taken up by dialog title bar, buttons, etc.

//     // Set the iframe height.
//     $(dlg.children("iframe").get(0)).css({"height": `${height}px`, "width": `${width}px`});  

// });

// window.addEventListener('message', (e: any): void => {
//     console.log(e);
//     if (typeof (e.data) === 'string') {
//         const data: I.message = JSON.parse(e.data);
//         if (data.callback)
//             data.callback(data);
//     }
// });

function getAdditionalInputs(inContent: string): void {
    inputsWithValue["event"] = inContent.match(/event:"(.+?)"/)![1];
    inputsWithValue["holdcode"] = inContent.match(/holdcode:"(.+?)"/)![1];
    inputsWithValue["posturlRaw"] = inContent.match(/posturl:"(.+?)"/)![1];
    inputsWithValue["posturlRawDecoded"] = decodeURIComponent(inputsWithValue["posturlRaw"]);
    inputsWithValue["posturl"] = decodeURIComponent(`${inputsWithValue["posturlRaw"]}&event=${inputsWithValue["event"]}&holdcode=${inputsWithValue["holdcode"]}&nocache=0&inclpkg=Y&incloffer=Y&inclcartdetails=Y&inclCart=Y&inclvenue=Y`);
    inputsWithValue["venueLocation"] = getVenueLocation();
}