// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
import { Constants } from "./constants";
import * as Utils from "../utils";
import { defaultHostConfig, HostConfig } from "../host-config";

export abstract class PopupControl {
    private _isOpen: boolean = false;
    private _overlayElement: HTMLElement;
    private _popupElement: HTMLElement;
    private _hostConfig?: HostConfig;

    protected abstract renderContent(): HTMLElement;

    onClose: (popupControl: PopupControl, wasCancelled: boolean) => void;

    keyDown(e: KeyboardEvent) {
        switch (e.key) {
            case Constants.keys.escape:
                this.closePopup(true);

                break;
        }
    }

    render(_rootElementBounds: ClientRect): HTMLElement {
        const element = document.createElement("div");
        element.tabIndex = 0;
        element.className = this.hostConfig.makeCssClassName("ac-ctrl", "ac-ctrl-popup-container");
        element.setAttribute("role", "dialog");
        element.setAttribute("aria-modal", "true");
        element.onkeydown = (e) => {
            this.keyDown(e);

            return !e.cancelBubble;
        };

        element.appendChild(this.renderContent());

        return element;
    }

    focus() {
        if (this._popupElement) {
            (<HTMLElement>this._popupElement.firstElementChild).focus();
        }
    }

    popup(rootElement: HTMLElement) {
        if (!this._isOpen) {
            this._overlayElement = document.createElement("div");
            this._overlayElement.className = this.hostConfig.makeCssClassName("ac-ctrl-overlay");
            this._overlayElement.tabIndex = 0;
            this._overlayElement.style.width = document.documentElement.scrollWidth + "px";
            this._overlayElement.style.height = document.documentElement.scrollHeight + "px";
            this._overlayElement.onfocus = (_e) => {
                this.closePopup(true);
            };

            document.body.appendChild(this._overlayElement);

            const rootElementBounds = rootElement.getBoundingClientRect();

            this._popupElement = this.render(rootElementBounds);
            this._popupElement.classList.remove(
                ...this.hostConfig.makeCssClassNames(
                    "ac-ctrl-slide",
                    "ac-ctrl-slideLeftToRight",
                    "ac-ctrl-slideRightToLeft",
                    "ac-ctrl-slideTopToBottom",
                    "ac-ctrl-slideRightToLeft"
                )
            );

            window.addEventListener("resize", (_e) => {
                this.closePopup(true);
            });

            const rootElementLabel = rootElement.getAttribute("aria-label");
            if (rootElementLabel) {
                this._popupElement.setAttribute("aria-label", rootElementLabel);
            }

            this._overlayElement.appendChild(this._popupElement);

            const popupElementBounds = this._popupElement.getBoundingClientRect();

            const availableSpaceBelow = window.innerHeight - rootElementBounds.bottom;
            const availableSpaceAbove = rootElementBounds.top;
            const availableSpaceRight = window.innerWidth - rootElementBounds.right;
            const availableSpaceLeft = rootElementBounds.left;

            let left = rootElementBounds.left + Utils.getScrollX();
            let top;

            if (
                availableSpaceAbove < popupElementBounds.height &&
                availableSpaceBelow < popupElementBounds.height
            ) {
                // Not enough space above or below root element
                const actualPopupHeight = Math.min(popupElementBounds.height, window.innerHeight);

                this._popupElement.style.maxHeight = actualPopupHeight + "px";

                if (actualPopupHeight < popupElementBounds.height) {
                    top = Utils.getScrollY();
                } else {
                    top =
                        Utils.getScrollY() +
                        rootElementBounds.top +
                        (rootElementBounds.height - actualPopupHeight) / 2;
                }

                if (
                    availableSpaceLeft < popupElementBounds.width &&
                    availableSpaceRight < popupElementBounds.width
                ) {
                    // Not enough space left or right of root element
                    const actualPopupWidth = Math.min(popupElementBounds.width, window.innerWidth);

                    this._popupElement.style.maxWidth = actualPopupWidth + "px";

                    if (actualPopupWidth < popupElementBounds.width) {
                        left = Utils.getScrollX();
                    } else {
                        left =
                            Utils.getScrollX() +
                            rootElementBounds.left +
                            (rootElementBounds.width - actualPopupWidth) / 2;
                    }
                } else {
                    // Enough space on the left or right of the root element
                    if (availableSpaceRight >= popupElementBounds.width) {
                        left = Utils.getScrollX() + rootElementBounds.right;

                        this._popupElement.classList.add(
                            ...this.hostConfig.makeCssClassNames(
                                "ac-ctrl-slide",
                                "ac-ctrl-slideLeftToRight"
                            )
                        );
                    } else {
                        left =
                            Utils.getScrollX() + rootElementBounds.left - popupElementBounds.width;

                        this._popupElement.classList.add(
                            ...this.hostConfig.makeCssClassNames(
                                "ac-ctrl-slide",
                                "ac-ctrl-slideRightToLeft"
                            )
                        );
                    }
                }
            } else {
                // Enough space above or below root element
                if (availableSpaceBelow >= popupElementBounds.height) {
                    top = Utils.getScrollY() + rootElementBounds.bottom;

                    this._popupElement.classList.add(
                        ...this.hostConfig.makeCssClassNames(
                            "ac-ctrl-slide",
                            "ac-ctrl-slideTopToBottom"
                        )
                    );
                } else {
                    top = Utils.getScrollY() + rootElementBounds.top - popupElementBounds.height;

                    this._popupElement.classList.add(
                        ...this.hostConfig.makeCssClassNames(
                            "ac-ctrl-slide",
                            "ac-ctrl-slideBottomToTop"
                        )
                    );
                }

                if (availableSpaceRight < popupElementBounds.width) {
                    left = Utils.getScrollX() + rootElementBounds.right - popupElementBounds.width;
                }
            }

            this._popupElement.style.left = left + "px";
            this._popupElement.style.top = top + "px";

            this._popupElement.focus();

            this._isOpen = true;
        }
    }

    closePopup(wasCancelled: boolean) {
        if (this._isOpen) {
            document.body.removeChild(this._overlayElement);

            this._isOpen = false;

            if (this.onClose) {
                this.onClose(this, wasCancelled);
            }
        }
    }

    get hostConfig(): HostConfig {
        return this._hostConfig ? this._hostConfig : defaultHostConfig;
    }

    set hostConfig(value: HostConfig) {
        this._hostConfig = value;
    }

    get isOpen(): boolean {
        return this._isOpen;
    }
}