import Comment from "../domain/Comment";
import Action from "../domain/Action";
import Interface4ViewManager from "../application/Interface4ViewManager";

const COMMENT_SECTION = "commentSection";
const COMMENT_SECTION_HEANDER = "commentSectionHeader";
const COMMENT_SECTION_BODY = "commentSectionBody";

export default class CommentView {

    private _application : Interface4ViewManager;
    private header: HTMLElement;
    private body: HTMLElement;
    private section: HTMLElement;


    constructor(application : Interface4ViewManager) {
        this._application = application;
    } 

    clear() {
        if (this.section) {
            this.section.remove()
        }
    }

    hide(): void {
        if (this.section) {
            this.section.hidden = true;
        }
    }

    show(parent: HTMLElement, commentList: Comment[], confirmedCommentList: Comment[]): void {
        if (!this.section) {
            this.section = document.createElement("div");
            this.section.setAttribute("id", COMMENT_SECTION);
    
            this.header = document.createElement("div")
            this.header.setAttribute("id", COMMENT_SECTION_HEANDER);
    
            this.body = document.createElement("div")
            this.body.setAttribute("id", COMMENT_SECTION_BODY);
    
            this.section.appendChild(this.header);
            this.section.appendChild(this.body);
            parent.appendChild(this.section);
        }
        
        while (this.body.hasChildNodes()) {
            this.body.firstChild.remove();
        }
        this.section.hidden = false;
        this.setCommentSectionHeader();

        if (commentList.length === 0) {
            this.body.appendChild(document.createTextNode("There is no comment."))
        }
        for (const comment of commentList) {
            this.addCommentInCommentSection(confirmedCommentList, comment)
        }
    }


    private setCommentSectionHeader() {
        let header = document.getElementById(COMMENT_SECTION_HEANDER)
        while (header.hasChildNodes()) {
            header.removeChild(header.firstElementChild)
        }
        let headerText = document.createElement("p");
        headerText.classList.add("user-view-header");
        headerText.innerText = `Comments :`

        header.appendChild(headerText)
    }

    private addCommentInCommentSection(commentsUp: Comment[], comment: Comment) {
        let body = document.getElementById(COMMENT_SECTION_BODY)
        let commentInfo = document.createElement("div")
        body.appendChild(commentInfo)

        let commentConfirmButton = document.createElement("button")
        if (!commentsUp.some(commentUp => commentUp.note === comment.note)) {
            commentConfirmButton.classList.add("commentUpButton")
            commentConfirmButton.innerText = "up"
            commentConfirmButton.addEventListener("click", (e) => this.confirmCommentCallback(e, comment))
            commentInfo.appendChild(commentConfirmButton)
        }

        let commentKind = document.createElement("span")
        commentKind.classList.add("commentKind")
        commentKind.innerText = comment.type

        let commentMessage = document.createElement("span")
        commentMessage.classList.add("commentMessage")
        if (comment.note !== undefined) {
            commentMessage.innerText = comment.note
        }
        let commentContext = document.createElement("div")
        commentContext.classList.add("commentContext")
        for (const distribution of comment.distributionList) {
            let contextDetail = document.createElement("div")
            let contextDetailOccurence = document.createElement("span")
            contextDetailOccurence.classList.add("commentOccurence")
            if (distribution.noteOccurence === 0) {
                continue
            }
            contextDetailOccurence.innerText = `${distribution.noteOccurence} / ${distribution.occurence}̀`
            contextDetail.appendChild(contextDetailOccurence)
            distribution.actions.forEach((action: Action) => {
                const contextNode = document.createElement("span")
                contextNode.classList.add("commentActionContext")
                contextNode.innerText = action.toString();
                contextDetail.appendChild(contextNode)
            })
            commentContext.appendChild(contextDetail)
        }

        commentInfo.appendChild(commentKind)
        commentInfo.appendChild(commentMessage)
        commentInfo.appendChild(commentContext)

    }

    private confirmCommentCallback(e, comment: Comment) {
        e.preventDefault()
        if (!e.target.disabled) {
            this._application.commentConfirmed(comment).then(() => {
                e.target.remove();
            })
        }
    }
}