var jQuery = require("jquery");
import 'jquery-ui';
import * as I from "./types/types";
import Utils from './modules/utils';
import * as Communication from "./modules/communication";
import * as Parser from './modules/parser';
import * as UI from "./modules/ui";
import * as BookingBtn from "./modules/bookingButton";
import * as Parent from "./modules/parent";
require("../src/css/inject.css");

let inputsWithValue: I.InputsWithValue;

window.addEventListener('load', () => {
    // Parse (hidden) inputs and their values
    const content: string = new XMLSerializer().serializeToString(document);
    inputsWithValue = { ...inputsWithValue, ...Parser.getInputs(content) };

    Utils.consoleLog(inputsWithValue);
    Utils.consoleLog(`trxstate: ${inputsWithValue["trxstate"]}`);

    // "posturl" in function showMap() only available if "pvmapse" PVO code is true.
    // "pvmapse" false disables seatmap
    const posturlAvail: boolean = /posturl:"(.+?)"/.test(content);

    Utils.consoleLog(`posturl available: ${posturlAvail}`);

    // Only inject on page with trxstate 20 and if seatmap is enabled with PVO code "pvmapse"
    if (inputsWithValue["trxstate"] !== "20" || posturlAvail === false)
        return;

    // Inject parent CSS
    // Parent = trxstate 20
    Parent.injectResources();

    // Start message handler to be able to receive messages from child
    Communication.listenToMessages(messageHandler);

    // We are on trxstate 20 page so get more needed inputs
    inputsWithValue = { ...inputsWithValue, ...Parser.getAdditionalInputs(content) };
    inputsWithValue = { ...inputsWithValue, ...Parser.getVenueImage() };
    inputsWithValue = { ...inputsWithValue, ...Parser.getImportantNote() };
    inputsWithValue["smap"] = Parser.getSMAP();

    // Inject and point seatmap button to new location
    BookingBtn.injectBookingBtn();

    // Create an jQuery dialog into an iframe which is opened on clicking seatmap button
    // https://api.jqueryui.com/dialog/
    UI.createDialog();

    Utils.consoleLog(inputsWithValue);
});

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

    const data: I.Message = JSON.parse(e.data);

    Utils.consoleLog(`parent: received from ${data.from}`);
    Utils.consoleLog(data);

    switch (data.event) {
        case "child_init_needInputsWithValue": {
            Parent.initNeedInputsWithValue(inputsWithValue);
            break;
        }
        case "child_init_needVenueXML": {
            Parent.initNeedVenueXML(inputsWithValue);
            break;
        }
        case "child_needSeatmapXML": {
            Parent.needSeatmapXML(e, inputsWithValue);
            break;
        }
        case "child_seatmap_ready": {
            Utils.consoleLog("child completely ready");
            jQuery("#containerBookingBtn").show();
            break;
        }
        case "child_needCheckoutResponse": {
            Parent.needCheckoutResponse(e, inputsWithValue);
            break;
        }
        case "child_hide_dialog_titlebar": {
            jQuery(".ui-dialog-titlebar").hide();
            break;
        }
        case "child_show_dialog_titlebar": {
            jQuery(".ui-dialog-titlebar").show();
            break;
        }
        case "child_click_checkout": {
            Parent.clickCheckout(e);
            break;
        }
        case "child_closeDialog": {
            jQuery(".ui-dialog-titlebar-close").click();
            break;
        }
        default:
            break;
    }
}