import Interface4TabScriptView from "../application/Interface4ViewManager";
import Comment from "../domain/Comment";
import ExplorationEvaluation from "../domain/ExplorationEvaluation";
import CommentView from "./CommentView";

const AIFEX_TAB_ID = "AIFEX_tab"
const TAB_DRAGGER = "AIFEX_tab_dragger"

export default class UserView {
    private _application : Interface4TabScriptView;

    public commentView: CommentView;

    public position: {x: string, y: string};
    public onTabMove: () => void;

    private tabElement: HTMLElement;
    private draggerElement: HTMLElement;

    constructor(application : Interface4TabScriptView) {
        this._application = application;
        this.commentView = new CommentView(application);
    }

    hide():void {
        if (this.commentView) {
            this.commentView.clear();
        }
        if (this.tabElement) {
            this.tabElement.remove();
            this.tabElement = undefined;
        }
    }

    show(commentList: Comment[], confirmedComments: Comment[], evaluation: ExplorationEvaluation, popupPosition: {x: string, y: string}): void {
        this.position = popupPosition;
        if(!this.tabElement) {
            this.tabElement = document.createElement("div");
            this.draggerElement = document.createElement("div");
            document.body.appendChild(this.tabElement);
            this.tabElement.appendChild(this.draggerElement);
            this.tabElement.id = AIFEX_TAB_ID;
            this.draggerElement.id = TAB_DRAGGER;
            this.dragPopup(this._application);
        }

        this.tabElement.hidden = false
        this.draggerElement.hidden = false
        this.commentView.show(this.tabElement, commentList, confirmedComments);

    }

    private dragPopup(application : Interface4TabScriptView):void  {
        // tslint:disable-next-line: one-variable-per-declaration
        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        this.tabElement.style.top = this.position.y
        this.tabElement.style.left =  this.position.x

        const dragMouseDownCallback = dragMouseDown.bind(this);
        const elementDragCallback = elementDrag.bind(this);
        const closeDragElementCallback = closeDragElement.bind(this);

        this.draggerElement.addEventListener('mousedown', dragMouseDownCallback)

        function dragMouseDown(e):void  {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.addEventListener("mouseup", closeDragElementCallback)
            // call a function whenever the cursor moves:
            document.addEventListener("mousemove", elementDragCallback);
        }

        function elementDrag(e):void  {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:

            this.tabElement.style.top = (this.tabElement.offsetTop - pos2) + "px";
            this.tabElement.style.left = (this.tabElement.offsetLeft - pos1) + "px";
        }

        function closeDragElement():void  {
            // stop moving when mouse button is released:
            document.removeEventListener("mouseup", closeDragElementCallback);
            document.removeEventListener("mousemove", elementDragCallback);
            const x = this.tabElement.style.left;
            const y = this.tabElement.style.top;

            application.setUserViewPosition({x, y });
        }
    }

}