import Structure from "../Structure";
import StructureFactory, {StructureImplConfig} from "../StructureFactory";
import {setElementVisibility} from "../../../Utility/ElementVisibility";

export default class FullScreenPopup extends Structure{
    protected externalElements: HTMLElement[] = [];
    public buttonTitle: string = '';
    public closeButtonText: string = '';

    constructor(params: Partial<FullScreenPopup> = {}) {
        super(params);
        Object.assign(this, params);
    }

    public placeHtml(container: HTMLElement): void {
        const structureDiv = document.createElement("div");
        this.addStandardContainerProperties(structureDiv);
        structureDiv.classList.add("pad-popup-group");

        const popupDiv = document.createElement("div");
        const backgroundDiv = document.createElement("div");
        const openButton = document.createElement("button");
        const fullScreenDiv = document.createElement("form");
        fullScreenDiv.classList.add("pad-form", "pad-full-screen-item-container", "planaday");

        backgroundDiv.classList.add("pad-popup-background", "pad-hidden");
        backgroundDiv.append(popupDiv);
        popupDiv.classList.add("pad-popup", "pad-hidden", "pad-form-group");

        let closePopup = document.createElement("button");
        closePopup.classList.add("pad-close-button", "button-primary");
        closePopup.innerText = this.closeButtonText ?? "Close";
        closePopup.type = "button";
        closePopup.addEventListener("click", () => {
            setElementVisibility(backgroundDiv, false, false);
            setElementVisibility(popupDiv, false);
        })
        popupDiv.append(closePopup);

        openButton.classList.add("pad-popup-open-button", "button-primary");
        openButton.innerText = this.buttonTitle;
        openButton.type = "button";
        openButton.addEventListener("click", () => {
            setElementVisibility(backgroundDiv, true, false);
            setElementVisibility(popupDiv, true);
        });
        backgroundDiv.addEventListener("click", () => {
            setElementVisibility(backgroundDiv, false, false);
            setElementVisibility(popupDiv, false);
        })

        setElementVisibility(popupDiv, false, false);
        setElementVisibility(backgroundDiv, false);

        structureDiv.appendChild(openButton);
        fullScreenDiv.appendChild(backgroundDiv);
        fullScreenDiv.appendChild(popupDiv);

        container.append(structureDiv);
        document.body.appendChild(fullScreenDiv);
        this.placedHtml.push(structureDiv);
        this.externalElements.push(fullScreenDiv);
        this.contents.forEach(c => c.placeHtml(popupDiv));
    }

    public cleanHtml() {
        super.cleanHtml();
        this.externalElements.forEach(e => e.remove());
        this.externalElements = [];
    }
}

export function addFullScreenPopupToFactory(factory: StructureFactory): void {
    factory.registerConstructor("fullScreenPopup", (config, params) => {
        const impl = config.impl;
        if (!isFullScreenPopupConfig(impl)) return null;

        const popupParam: Partial<FullScreenPopup> = params as Partial<FullScreenPopup>;

        popupParam.buttonTitle = impl.buttonTitle;
        popupParam.closeButtonText = impl.closeButtonText;

        return new FullScreenPopup(popupParam);
    });
}

function isFullScreenPopupConfig(config:StructureImplConfig): config is FullScreenPopupConfig{
    return config.type === "fullScreenPopup";
}

interface FullScreenPopupConfig extends StructureImplConfig{
    type: "fullScreenPopup";
    buttonTitle: string;
    closeButtonText: string;
}