import {SlideApplicationOption} from "./SlideApplication";
import EventEmitter from "eventemitter3";

interface SideBarViewEvents {
    pageChange: (index: number) => void;
}

export class SideBarView extends EventEmitter<SideBarViewEvents> {
    public readonly root: HTMLDivElement = document.createElement("div");
    private itemList: HTMLDivElement[] = [];

    public constructor() {
        super();
        this.root.style.backgroundColor = '#eee';
        this.root.className = "slide-sidebar";
        this.root.style.width = "240px";
        this.root.style.height = "100%";
        this.root.style.position = "absolute";
        this.root.style.left = "-240px";
        this.root.style.top = "0";
        this.root.style.zIndex = "5";
        this.root.style.transition = "left 0.3s ease-in-out";
        this.root.style.overflow = "auto";
        this.root.style.border = "1px solid #ccc";
        this.root.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
        this.root.style.display = "flex";
        this.root.style.flexDirection = "column";
        this.root.style.justifyContent = "flex-start";
        this.root.style.alignItems = "center";

    }

    private onMouseOver = (itemContainer: HTMLDivElement) => {
        itemContainer.style.borderColor = "#ccc";
    }

    private onMouseOut = (itemContainer: HTMLDivElement) => {
        itemContainer.style.borderColor = "transparent";
    }

    private onClickHandle = (index: number) => {
        this.emit("pageChange", index);
    }

    public initialize(slideCount: number, option: SlideApplicationOption): void {
        for (let i = 1; i <= slideCount; i++) {
            const itemContainer = document.createElement("div");
            this.itemList.push(itemContainer);
            itemContainer.style.width = "60%";
            itemContainer.style.display = "flex";
            itemContainer.style.justifyContent = "center";
            itemContainer.style.alignItems = "flex-start";
            itemContainer.style.border = "7px solid transparent";
            itemContainer.style.position = "relative";
            itemContainer.style.borderRadius = "4px"
            itemContainer.style.transition = "border-color .3s";
            itemContainer.style.marginBottom = "10px";

            itemContainer.addEventListener("mouseover", () => this.onMouseOver(itemContainer))
            itemContainer.addEventListener("mouseout", () => this.onMouseOut(itemContainer))
            itemContainer.addEventListener("click", () => this.onClickHandle(i))

            const pageIndex = document.createElement("span");
            pageIndex.textContent = `${i}`;
            pageIndex.style.position = "absolute";
            pageIndex.style.top = "1px";
            pageIndex.style.left = "-10px";
            pageIndex.style.transform = "translate(-100%)";
            pageIndex.style.fontSize = "12px";
            pageIndex.style.color = "#5f5f5f";

            const preview = document.createElement("img");
            preview.style.width = "100%";
            preview.style.display = "inline-block";
            preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;

            itemContainer.appendChild(preview);
            itemContainer.appendChild(pageIndex);

            this.root.appendChild(itemContainer);
        }
    }

    public dispose() {
        this.itemList.forEach(item => {
            item.removeEventListener("mouseover", () => this.onMouseOver(item))
            item.removeEventListener("mouseout", () => this.onMouseOut(item))
        })
    }

}