if (!document.getElementById("commentInput")) {
    console.log("%cThe 【commentInput】 element ID could not be found", "font-size:14px;color:blue;font-weight:bold");
} else {
    insertcommentInput();
}

function insertcommentInput() {
    if ("undefined" == typeof window.verify||"undefined" == typeof window.verifystatus) {
        return;
    }
    let commentstyle = document.createElement("style");
    commentstyle.innerHTML =
        `a{text-decoration:none}.comments{font-family:Helvetica,Arial,sans-serif;}.comments .comments_lable{border-bottom:1px solid #e9ebee;line-height:25px;margin-bottom:24px;padding:8px 0;display:flex;justify-content:space-between;}.comments .comments_lable .comments_lable_left > span{font-weight:600;font-size:0.9em;line-height:25px;}.comments .comments_lable .comments_lable_right > span{font-size:0.9em;line-height:25px;}.comments .comments_lable .comments_lable_right > select{font-size:1em;}.comments .comments_input{margin-bottom:20px;}.comments .comments_input > textarea{font-size:1em;padding:12px 8px;min-height:40px;border:1px solid #d3d6db;word-wrap:break-word;box-sizing:border-box;vertical-align:top;width:100%;font-family:Helvetica,Arial,sans-serif;}.comments .comments_input > textarea:focus{outline-offset:-2px;outline:-webkit-focus-ring-color auto 1px;}.comments .comments_input .submit_comment{border:1px solid #d3d6db;border-top:0;position:relative;display:flex;padding:8px;font-size:14px;line-height:1.358;word-break:break-word;background:#f5f6f7;text-align:right;justify-content:space-between;}.comments .comments_input .submit_comment > span{font-size:11px;color:#90949c;font-weight:normal;line-height:24px;}.comments .comments_input .submit_comment > div{right:0;}.comments .comments_input .submit_comment > div > button{background-color:#9cb4d8;border-color:#9cb4d8;font-size:0.9em;white-space:normal;line-height:22px;color:#fff;border:1px solid;border-radius:2px;box-sizing:content-box;-webkit-font-smoothing:antialiased;font-weight:bold;justify-content:center;padding:0 8px;position:relative;text-align:center;text-shadow:none;vertical-align:middle;}.comments .comments_list{font-size:14px;line-height:1.358;word-break:break-word;}.comments .comments_list .comment_reply{display:flex;padding-left:8px;margin:8px 0;}.comments .comments_list .acomment{display:flex;margin-top:12px;padding-top:12px;border-top:1px dotted #d3d6db;}.comments .comments_list .acomment .acomment_left{position:relative;display:block;width:40px;padding-right:8px;}.comments .comments_list .acomment .acomment_left > img{width:32px;height:32px;object-fit:cover;overflow:hidden;}.comments .comments_list .acomment .acomment_right{display:block;}.comments .comments_list .acomment .acomment_right .acomment_name span a{color:#385898;font-weight:600;white-space:nowrap;}.comments .comments_list .acomment .acomment_right .acomment_content{color:#1c1e21;font-size:14px;line-height:1.358;word-break:break-word;margin:4px 0;}.comments .comments_list .acomment .acomment_right .acomment_content .acomment_img{max-width:100%;height:auto;padding:0;}.comments .comments_list .acomment .acomment_right .acomment_tool{font-size:12px;line-height:1.358;padding-top:2px;}.comments .comments_list .acomment .acomment_right .acomment_tool > a{color:#4267b2;cursor:pointer;text-decoration:none;}.comments .comments_list .acomment .acomment_right .acomment_tool > span{font-size:12px;}.commentmark{margin-bottom:4px;margin-top:4px;color: #90949c;font-style: italic;}.commentmark>span>a{color:#385898;cursor:pointer;text-decoration:none;}.comment_reply_list{border-left:1px dotted #d3d6db;}`;
    document.head.appendChild(commentstyle);
    let comconhtml =
        `<div class=comments><div class=comments_lable><div class=comments_lable_left><span id=commentnum>216</span><span> Comments</span></div><div class=comments_lable_right><span>Sort by </span><select><option>Top<option>Newest<option>Oldest</select></div></div><div id=comments_input><div class=comments_input><textarea id=commentinput onFocus="showsubmit()" oninput="showsubmitbtn()" placeholder="Add a comment..."></textarea><div id=submit_comment style="display:none" class=submit_comment><span>Also post on Facebook</span><div><button id=subbtn onclick="submitcomment()">Post</button></div></div></div></div><div class=comments_list id=comments_list></div></div>`;
    document.getElementById("commentInput").insertAdjacentHTML('afterbegin', comconhtml);
}

function showsubmit() {
    document.getElementById("submit_comment").style.display = "flex";
}

function showsubmitbtn() {
    if (document.getElementById("commentinput").value === '') {
        document.getElementById("subbtn").style.backgroundColor = "#9cb4d8";
        document.getElementById("subbtn").disabled = true;
    } else {
        document.getElementById("subbtn").style.backgroundColor = "#385898";
        document.getElementById("subbtn").disabled = false;
    }
}

function submitcomment() {
    if (document.getElementById("commentinput").value === '') {
        return;
    }
    let iptctt = document.getElementById("commentinput").value;
    document.getElementById("commentinput").value = "";
    document.getElementById("subbtn").style.backgroundColor = "#9cb4d8";
    document.getElementById("subbtn").disabled = true;
    postcomment(iptctt, "comment");
}

function postcomment(msg, t) {
    let data = "url=" + window.location.href + "&content=" + msg + "&type=" + t;
    let url = "https://licat.work/api/usercomment";
    let xhr = new XMLHttpRequest();
    xhr.open('POST', url, false);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200 || xhr.status == 304) {
                console.log(xhr.responseText);
            }
        }
    }
    xhr.send(data);
}