let ArticleToolsZoomStatus;
let inputName, inputMail, textareaComment, pApplyComment;
let divComments, divNameMail, divMetadata;
let divComment = [];
let pimgPublishTime, pimgReadingDuration, pimgVisitsCount, pimgCommentsCount;

class ArticleMetadata extends HTMLDivElement {
    constructor(publishTime, readingDuration, visitsCount, commentsCount) {
        super();

        this.style.backgroundColor = colorless;
        this.style.display = "flex";
        this.style.margin = "0px";
        this.style.flexDirection = zoom ? "column" : "row";
        this.style.paddingInlineEnd = "auto";

        pimgPublishTime = new PImg(publishTime, imgWatch, "");
        pimgPublishTime.setAlt("Publish-Time");
        pimgPublishTime.style.padding = "0.1cm";
        pimgPublishTime.style.marginInlineStart = "0cm";
        pimgPublishTime.style.marginInlineEnd = zoom ? "auto" : "0cm";
        pimgPublishTime.setTextSize(sizeHeaderText);
        this.appendChild(pimgPublishTime);
        this.pimgPublishTime = pimgPublishTime;

        pimgReadingDuration = new PImg(readingDuration, imgWatch, "");
        pimgReadingDuration.setAlt("Reading-Duration");
        pimgReadingDuration.style.padding = "0.1cm";
        pimgReadingDuration.style.marginInlineStart = zoom ? "0cm" : "1cm";
        pimgReadingDuration.style.marginInlineEnd = zoom ? "auto" : "0cm";
        pimgReadingDuration.setTextSize(sizeHeaderText);
        this.appendChild(pimgReadingDuration);
        this.pimgReadingDuration = pimgReadingDuration;

        pimgVisitsCount = new PImg(visitsCount, imgEye, "");
        pimgVisitsCount.setAlt("Visits-Count");
        pimgVisitsCount.style.padding = "0.1cm";
        pimgVisitsCount.style.marginInlineStart = zoom ? "0cm" : "1cm";
        pimgVisitsCount.style.marginInlineEnd = zoom ? "auto" : "0cm";
        pimgVisitsCount.setTextSize(sizeHeaderText);
        this.appendChild(pimgVisitsCount);
        this.pimgVisitsCount = pimgVisitsCount;

        pimgCommentsCount = new PImg(commentsCount, imgComment, "");
        pimgCommentsCount.setAlt("Comments-Count");
        pimgCommentsCount.style.padding = "0.1cm";
        pimgCommentsCount.style.marginInlineStart = zoom ? "0cm" : "1cm";
        pimgCommentsCount.style.marginInlineEnd = zoom ? "auto" : "0cm";
        pimgCommentsCount.setTextSize(sizeHeaderText);
        this.appendChild(pimgCommentsCount);
        this.pimgCommentsCount = pimgCommentsCount;
    }

}

function showArticleMeta(articleId, parentElement) {
    customElements.define("article-metadata", ArticleMetadata, {extends: "div"});
    customElements.define("article-comment", ArticleComment, {extends: "div"});

    divMetadata = new ArticleMetadata("0", "0", "0", "0");
    divMetadata.style.opacity = 0;
    divMetadata.style.marginRight = "auto";
    divMetadata.style.marginLeft = "auto";
    parentElement.appendChild(divMetadata);

    const postData = new FormData();
    postData.append("id", articleId);

    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            const getData = JSON.parse(this.responseText);
            if (getData["result"] === "ok") {
                const detailData = getData["detail"];
                const elapsedPublishTime = getElapsedTime(Date.now() / 1000 - detailData["publishTime"]);
                const elapsedReadingDuration = getElapsedTime(detailData["readingDuration"]);
                divMetadata.pimgPublishTime.p.innerHTML = str(strPublishTime) + ": " + elapsedPublishTime + " " + str(strAgo);
                divMetadata.pimgReadingDuration.p.innerHTML = str(strReadingDuration) + ": " + elapsedReadingDuration;
                divMetadata.pimgVisitsCount.p.innerHTML = (language === EN ? detailData["visitsCount"] : getPersianDigit(detailData["visitsCount"])) + " " + str(strVisits);
                divMetadata.pimgCommentsCount.p.innerHTML = (language === EN ? detailData["comments"] : getPersianDigit(detailData["commentsCount"])) + " " + str(strComments);
                divMetadata.style.opacity = 1;
            }
        }
    };
    xhr.open("POST", apiGetArticleDetail);
    xhr.send(postData);

    return divMetadata;
}

class ArticleComment extends HTMLDivElement {
    constructor(name, publishTime, body) {
        super();

        this.style.display = "flex";
        this.style.margin = "0.5cm";
        this.style.padding = "1cm";
        this.style.flexDirection = "column";

        const divNameTime = createDiv();
        divNameTime.style.flexDirection = zoom ? "column" : "row";
        divNameTime.style.marginInlineEnd = "auto";
        this.appendChild(divNameTime);
        this.divNameTime = divNameTime;

        const pimgName = new PImg(name, imgPerson, "");
        pimgName.setAlt("Name");
        pimgName.style.padding = "0.2cm";
        pimgName.p.style.fontWeight = "bold";
        pimgName.setTextSize(sizeHeaderText);
        divNameTime.appendChild(pimgName);
        this.pimgName = pimgName;

        const pimgPublishTime = new PImg(publishTime, imgWatch, "");
        pimgPublishTime.setAlt("Publish-Time");
        pimgPublishTime.style.padding = "0.2cm";
        pimgPublishTime.style.marginInlineStart = zoom ? "0cm" : "1cm";
        pimgPublishTime.style.marginInlineEnd = "auto";
        pimgPublishTime.setTextSize(sizeHeaderText);
        divNameTime.appendChild(pimgPublishTime);
        this.pimgPublishTime = pimgPublishTime;

        const pBody = createP(body);
        pBody.style.whiteSpace = "normal";
        pBody.style.fontSize = sizeHeaderText;
        this.appendChild(pBody);
        this.pBody = pBody;
    }
}

function showArticleComments(articleId) {
    return showArticleComments2(articleId, document.body);
}

function showArticleComments2(articleId, parent) {
    divComments = createDiv();
    divComments.style.flexDirection = "column";
    divComments.style.marginTop = "1cm";
    divComments.style.marginBottom = "1cm";
    divComments.style.padding = "0.5cm";
    divComments.style.marginInlineEnd = "auto";
    divComments.style.marginInlineStart = "auto";
    divComments.style.boxShadow = "0px 0px 7px #777777";
    parent.appendChild(divComments);

    const pSendComment = createP(str(strSendComment));
    pSendComment.style.fontWeight = "bold";
    pSendComment.style.fontSize = sizeFooterText;
    pSendComment.style.margin = "0.5cm";
    pSendComment.style.marginInlineEnd = "auto";
    pSendComment.style.whiteSpace = "nowrap";
    divComments.appendChild(pSendComment);

    divNameMail = createDiv();
    divNameMail.style.marginBottom = "0.5cm";
    divNameMail.style.flexDirection = "row";
    divComments.appendChild(divNameMail);

    inputName = document.createElement("input");
    inputName.style.outline = "none";
    inputName.style.borderColor = "#cccccc";
    inputName.style.padding = "0.2cm";
    inputName.style.paddingInlineStart = "0.5cm";
    inputName.style.paddingInlineEnd = "0.5cm";
    inputName.style.margin = "0.2cm";
    inputName.type = "text";
    inputName.placeholder = str(strNameFamily);
    inputName.style.fontSize = sizeHeaderText;
    inputName.style.fontWeight = "bold";
    inputName.style.fontFamily = "fontface1";
    inputName.style.textAlign = "center";
    setHoverAnimation(inputName, "pimgFooter");    inputName.style.borderRadius = "0.3cm";
    inputName.style.borderWidth = "1px";
    divNameMail.appendChild(inputName);

    inputMail = document.createElement("input");
    inputMail.style.outline = "none";
    inputMail.style.borderColor = "#cccccc";
    inputMail.style.padding = "0.2cm";
    inputMail.style.paddingInlineStart = "0.5cm";
    inputMail.style.paddingInlineEnd = "0.5cm";
    inputMail.style.margin = "0.2cm";
    inputMail.type = "text";
    inputMail.placeholder = str(strEmailAddress);
    inputMail.style.fontSize = sizeHeaderText;
    inputMail.style.fontWeight = "bold";
    inputMail.style.fontFamily = "fontface1";
    inputMail.style.textAlign = "center";
    setHoverAnimation(inputMail, "pimgFooter");    inputMail.style.borderRadius = "0.3cm";
    inputMail.style.borderWidth = "1px";
    divNameMail.appendChild(inputMail);

    textareaComment = document.createElement("textarea");
    textareaComment.style.outline = "none";
    textareaComment.style.borderColor = "#cccccc";
    textareaComment.style.height = "3cm";
    textareaComment.style.padding = "0.2cm";
    textareaComment.style.paddingRight = "0.5cm";
    textareaComment.style.paddingLeft = "0.5cm";
    textareaComment.type = "text";
    textareaComment.placeholder = str(strEnterComment);
    textareaComment.style.fontSize = sizeHeaderText;
    textareaComment.style.fontFamily = "fontface1";
    textareaComment.style.resize = "none";
    setHoverAnimation(textareaComment, "pimgFooter");
    textareaComment.style.borderRadius = "0.3cm";
    textareaComment.style.borderWidth = "1px";
    divComments.appendChild(textareaComment);

    const divApplyComment = createDiv();
    divApplyComment.style.flexDirection = "row";
    divApplyComment.style.margin = "0.5cm";
    divApplyComment.style.marginInlineStart = "auto";
    divComments.appendChild(divApplyComment);

    divApplyComment.appendChild(spinner);
    spinner.style.opacity = 0;

    pApplyComment = new PClick(str(strSendComment));
    pApplyComment.style.padding = "0.2cm";
    pApplyComment.style.paddingInlineStart = "1cm";
    pApplyComment.style.paddingInlineEnd = "1cm";
    pApplyComment.style.marginInlineStart = "0.5cm";
    pApplyComment.style.fontSize = sizeHeaderText;
    pApplyComment.style.fontWeight = "bold";
    pApplyComment.style.color = colorHeaderText;
    setHoverAnimation(pApplyComment, "pApplyComment");
    setHoverPointer(pApplyComment);
    pApplyComment.addEventListener("click", function(event) { applyCommentClick(articleId); });
    divApplyComment.appendChild(pApplyComment);

    const pComments = createP(str(strUsersComment));
    pComments.style.fontWeight = "bold";
    pComments.style.fontSize = sizeFooterText;
    pComments.style.margin = "0.5cm";
    pComments.style.marginInlineEnd = "auto";
    divComments.appendChild(pComments);

    const postData = new FormData();
    postData.append("articleId", articleId);

    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var getData = JSON.parse(this.responseText);
            if (getData["result"] === "ok") {
                var comments = getData["comments"];
                for (let i = 0; i < comments.length; i++) {
                    var comment = comments[i];
                    divComment[i] = new ArticleComment("0", "0", "0");
                    divComment[i].style.width = zoom ? "80%" : "30cm";
                    divComment[i].style.boxShadow = "2px 2px 4px #999999";
                    divComment[i].pimgName.p.innerHTML = str(strSentBy) + " " + (comment["name"] == null ? str(strUnknown) : comment["name"]);
                    var elapsedPublishTime = getElapsedTime(Date.now() / 1000 - comment["publishTime"]);
                    divComment[i].pimgPublishTime.p.innerHTML = elapsedPublishTime + " " + str(strAgo);
                    divComment[i].pBody.innerHTML = comment["body"];
                    setHoverAnimation(divComment[i], "pimgFooter");
                    divComment[i].style.borderRadius = "0px";
                    divComments.appendChild(divComment[i]);
                }
                window.dispatchEvent(new Event("resize"));
            }
        }
    };
    xhr.open("POST", apiGetArticleComments);
    xhr.send(postData);

    ArticleToolsZoomStatus = "none";
    window.addEventListener("resize", function () {
        if (zoom) {
            ArticleToolsZoomStatus = "zoom";
            ArticleToolsZoomStyle();
        } else if (!zoom) {
            ArticleToolsZoomStatus = "default";
            ArticleToolsDefaultStyle();
        }
    });
    window.dispatchEvent(new Event("resize"));

    return divComments;
}

function applyCommentClick(articleId) {
    if (spinner.style.opacity === 0) {
        if (textareaComment.value.length > 0) {
            spinner.style.opacity = 1;

            const postData = new FormData();
            postData.append("articleId", articleId);
            postData.append("name", inputName.value.length > 0 ? inputName.value : "");
            postData.append("mail", inputMail.value.length > 0 ? inputMail.value : "");
            postData.append("body", textareaComment.value);

            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        const getData = JSON.parse(this.responseText);
                        if (getData["result"] === "ok") {
                            window.alert(str(strCommentApply));
                            inputName.value = "";
                            inputMail.value = "";
                            textareaComment.value = "";
                        } else {
                            window.alert(str(strErrCommentApply));
                        }
                    } else {
                        window.alert(str(strErrCommentApply) + "\n" + this.messageerror);
                    }
                    spinner.style.opacity = 0;
                }
            };
            xhr.open("POST", apiPostArticleComment);
            xhr.send(postData);
        } else {
            window.alert(str(strErrEnterComment));
        }
    }
}

function ArticleToolsZoomStyle() {
    pimgPublishTime.style.marginInlineEnd = "auto";
    pimgReadingDuration.style.marginInlineStart = "0cm";
    pimgReadingDuration.style.marginInlineEnd = "auto";
    pimgVisitsCount.style.marginInlineStart = "0cm";
    pimgVisitsCount.style.marginInlineEnd = "auto";
    pimgCommentsCount.style.marginInlineStart = "0cm";
    pimgCommentsCount.style.marginInlineEnd = "auto";

    divMetadata.style.flexDirection = "column";
    divMetadata.style.width = "90%";
    divComments.style.width = "85%";
    divNameMail.style.flexDirection = "column";
    divNameMail.style.width = "90%";
    inputName.style.width = "95%";
    inputMail.style.width = "95%";
    textareaComment.style.width = "90%";
    for (let i = 0; i < divComment.length; i++) {
        divComment[i].style.width = "80%";
        divComment[i].divNameTime.style.flexDirection = "column";
        divComment[i].pimgPublishTime.style.marginInlineStart = "0cm";
    }
}

function ArticleToolsDefaultStyle() {
    pimgPublishTime.style.marginInlineEnd = "0cm";
    pimgReadingDuration.style.marginInlineStart = "1cm";
    pimgReadingDuration.style.marginInlineEnd = "0cm";
    pimgVisitsCount.style.marginInlineStart = "1cm";
    pimgVisitsCount.style.marginInlineEnd = "0cm";
    pimgCommentsCount.style.marginInlineStart = "1cm";
    pimgCommentsCount.style.marginInlineEnd = "0cm";

    divMetadata.style.flexDirection = "row";
    divMetadata.style.width = "94%";
    divComments.style.width = "94%";
    divNameMail.style.flexDirection = "row";
    divNameMail.style.width = "94%";
    inputName.style.width = "44%";
    inputMail.style.width = "44%";
    textareaComment.style.width = "94%";
    for (let i = 0; i < divComment.length; i++) {
        divComment[i].style.width = "94%";
        divComment[i].divNameTime.style.flexDirection = "row";
        divComment[i].pimgPublishTime.style.marginInlineStart = "1cm";
    }
}