import * as I from "../types/types";
import * as Communication from "./communication";
import { config } from "./config";
import * as Events from "./events";
import * as Panzoom from "./panzoom";
import * as CartButtons from "./cartButtons";
import Utils from "./utils";

export function setOptionSelect(inSeatmapListing: I.Seatmap[], inId: string): void {
    const seatmapDropdown: HTMLElement | null = document.getElementById(inId);

    if (seatmapDropdown) {
        for (let seatmapObj of inSeatmapListing) {
            const id: string = seatmapObj.id[0];
            const desc: string = Utils.encodeCP850DecodeUTF8(seatmapObj.desc[0]);

            var opt: HTMLOptionElement = document.createElement('option');
            opt.value = id;
            opt.innerHTML = desc;
            seatmapDropdown.appendChild(opt);
        }
    }
}

export function changeSiteTitle(): void {
    document.title += ` ${config.state.inputsWithValue?.supplier_code}`; 
}

export function setEventInfo(inEventInfo: I.EventInfo): void {
    const inputsWithValue = config.state.inputsWithValue!;
    const desc: string = Utils.encodeCP850DecodeUTF8(inEventInfo.desc[0]);
    const location: string = inputsWithValue.venueLocation;

    jQuery("#eventInfoDesc span.fl-heading-text")[0].childNodes[0].textContent = desc;
    jQuery("#eventInfoLocation p")[0].childNodes[0].textContent = location;
    jQuery("#eventInfoDate p")[0].childNodes[0].textContent = inEventInfo.start[0];
    jQuery("#eventInfoCapacity p")[0].childNodes[0].textContent = `Verfügbare Plätze: ${inEventInfo.seats_available} von ${inEventInfo.venue_config_capacity[0]}`;
}

export function createDialog(): void {
    const iframeHTML: string = "<iframe id='iframeSeatmap' scrolling='no' frameborder='0' marginwidth='0' marginheight='0' allowfullscreen width='100%' />";
    const src: string = Utils.getConfigValue("seatmap");
    Utils.consoleLog(src);

    jQuery("#dialogSeatmap").append(
        jQuery(iframeHTML)
            .attr("src", src))
        .dialog({
            modal: true,
            autoOpen: false,
            closeOnEscape: true,
            draggable: false,
            hide: true,
            show: true,
            resizable: false,
            title: "",
            width: "100%",
            height: "auto",
            close: () => jQuery("html, body").css("overflow", "auto"),
        });

    Events.addOpenSeatmap();
}

export function destroyCurrentSeatmap(inSelector: string): void {
    if (config.state.panzoom)
        Panzoom.unbindPanzoomEvents(inSelector);

    jQuery("#containerSeatmapInner").remove();
    jQuery("#htmlSeatmapInner .fl-html").removeAttr("style");
    jQuery("#htmlSeatmapInner .fl-html").append('<div id="containerSeatmapInner"></div>');
    jQuery("#JSCLegendInner").remove();
    jQuery("#JSCLegend .fl-html").append('<div id="JSCLegendInner"></div>');
}

export function controlLoftloader(inSwitch: string) {
    if (inSwitch === "show")
        jQuery("body").removeClass("loaded loftloader-loaded");
    else if (inSwitch === "hide")
        jQuery("body").addClass("loaded loftloader-loaded");
}

export function changeVenueImage(): void {
    const inputsWithValue: I.InputsWithValue = config.state.inputsWithValue!;

    if (inputsWithValue.venueImageSrc !== undefined)
        jQuery("#venueImage img").attr("src", inputsWithValue.venueImageSrc);
}

export function fadeInCartModal(): void {
    jQuery("#modalCart-overlay").fadeIn(300);
    Communication.sendEventToParent("child_hide_dialog_titlebar");
}

export function generatePricescaleCSS(): string {
    const venueXML: I.VenueXML = config.state.inVenueXML!;
    const venuePricescalesArr: I.Pricescale2[] = venueXML.venue[0].pricescales[0].pricescale;

    return venuePricescalesArr.map((arr, i) => {
        const ID: string = arr.id[0];
        const color: string = arr.color[0];

        // Update: Colors are always defined: fallback colors exist in system so every XML provides them
        // Update 2: Above is not true, since old PVO versions does NOT have default/fallback colors
        const colorCSS:string = color ? `#${color} !important` : `${config.fallbackColors[i]} !important`; 
    
        return `._${ID} { background-color: ${colorCSS}; }`;   
    }).join("\r\n");
}

export function adjustUIToLoading(): void {
    CartButtons.showHideBtnCartLoading("show");
    jQuery("#modalCart i").hide();
    jQuery("#modalCart .uabb-button-text").addClass("dot-pulse");
}

export function appendVersion(): void {
    jQuery("#bottomHTMLVersion")[0].innerText = config.version;
    jQuery("#bottomHTMLBranch")[0].innerText = `(${config.branch})`;
}