import Interface4UserView from "../application/Interface4UserView";
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 : Interface4UserView;

    public commentView: CommentView;

    public position: {x: string, y: string} | undefined;

    private tabElement: HTMLElement | undefined;
    private draggerElement: HTMLElement | undefined;

    constructor(application : Interface4UserView) {
        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 | undefined, 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;
        if (this.draggerElement) {
            this.draggerElement.hidden = false;
        }
        this.commentView.show(this.tabElement, commentList, confirmedComments);

    }

    private dragPopup(application : Interface4UserView):void  {
        // tslint:disable-next-line: one-variable-per-declaration
        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        if (this.tabElement && this.position) {
            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);

        if (this.draggerElement) {
            this.draggerElement.addEventListener('mousedown', dragMouseDownCallback);
        }

        function dragMouseDown(e : MouseEvent):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(this : UserView, e : MouseEvent):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:

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

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

                application.setUserViewPosition({x, y });

            }
            
        }
    }

}