import EventEmitter from "eventemitter3";
import { Icons } from "./icons";

interface FooterViewEvents {
    prevPage: () => void;
    nextPage: () => void;
    prevStep: () => void;
    nextStep: () => void;
    sideBarToggle: () => void;
}

const EM_COLOR = "#8C8C8C";

export class FooterView extends EventEmitter<FooterViewEvents> {

    public readonly root: HTMLDivElement;

    private prevStep: HTMLDivElement;
    private nextStep: HTMLDivElement;

    private prevPage: HTMLDivElement;
    private nextPage: HTMLDivElement;

    private sideBarToggle: HTMLDivElement;

    public constructor() {
        super();
        this.root = document.createElement("div");
        this.root.style.height = "24px";
        this.root.style.zIndex = "6";
        this.root.style.display = "flex";
        this.root.style.alignItems = "center";
        this.root.style.justifyContent = "center";
        this.root.style.backgroundColor = "#fff";

        this.prevStep = this.createIcon(Icons.prevStep(EM_COLOR), () => {
            this.emit("prevStep");
        });

        this.nextStep = this.createIcon(Icons.nextStep(EM_COLOR), () => {
            this.emit("nextStep");
        });

        this.prevPage = this.createIcon(Icons.prevPage(EM_COLOR), () => {
            this.emit("prevPage");
        });

        this.nextPage = this.createIcon(Icons.nextPage(EM_COLOR), () => {
            this.emit("nextPage");
        });

        this.sideBarToggle = this.createIcon(Icons.sideBar(EM_COLOR), () => {
            this.emit("sideBarToggle")
        });

        this.root.appendChild(this.sideBarToggle);
        this.root.appendChild(this.createSpacer());
        this.root.appendChild(this.prevPage);
        this.root.appendChild(this.prevStep);
        this.root.appendChild(this.nextStep);
        this.root.appendChild(this.nextPage);
        this.root.appendChild(this.createSpacer());
    }

    public prevPageState(enable: boolean): void {
        if (enable) {
            this.prevPage.style.pointerEvents = "all";
            this.prevPage.style.opacity = "1";
        } else {
            this.prevPage.style.pointerEvents = "none";
            this.prevPage.style.opacity = "0.5";
        }
    }

    public nextPageState(enable: boolean): void {
        if (enable) {
            this.nextPage.style.pointerEvents = "all";
            this.nextPage.style.opacity = "1";
        } else {
            this.nextPage.style.pointerEvents = "none";
            this.nextPage.style.opacity = "0.5";
        }
    }

    private createSpacer(): HTMLDivElement {
        const div = document.createElement("div");
        div.style.flex = "1 1 auto";
        return div;
    }

    private createIcon(svgContent: string, action: () => void): HTMLDivElement {
        const icon = document.createElement("div");
        icon.style.width = "18px";
        icon.style.height = "18px";
        icon.style.borderRadius = "2px";
        icon.style.margin = "6px";
        icon.innerHTML = svgContent;
        icon.addEventListener("click", () => {
            action();
        });
        icon.addEventListener("mouseover", () => {
            icon.style.backgroundColor = "#f0f0f0";
        });
        icon.addEventListener("mouseout", () => {
            icon.style.backgroundColor = "transparent";
        });
        return icon;
    }
}