var tmp_id;
var tmp_txt;
var old_id;
var tmp_hover;
var tmp_color;
var tmp_class;
var total;
var is_drag = false;
var editable;
var removedId = [];
// NEW selector
jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

// OVERWRITES old selecor
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

$(".swal2-backdrop-show").on("mouseup", function (event) {
  //....swal stuff
  $(".swal2-backdrop-show").css("display", "none");
});

// document.body.click = function(e) {
//     if ( editable == 1 ) {
//         if ($(e.target).attr('mtxt') != 'word' && $(e.target).attr('mtxt') != 'other') {
//             if (!$(".swal2-backdrop-show").is(":visible")) {
//                 catchchange();
//             }
//             // $('#' + tmp_id).attr('contenteditable', 'false');
//         } else {
//             if ($(e.target).attr('id') != tmp_id) {
//                 catchchange();
//                 // $('#' + tmp_id).attr('contenteditable', 'false');
//             }
//             var markt = 0;
//             var nid = $(e.target).attr('id');
//             tmp_id = nid;
//             tmp_txt = $(e.target).text();
//             tclass = e.target.className.split(' ');
//             if (tclass[1] == 'redtxt') {
//                 var res = $(e.target).attr('rtxt').split("*");
//                 var pageos = $("#pagecontent").offset() || $("#textres").offset();
//                 var inpute = '';
//                 var delit = "'";
//                 var y = $("#pagecontent").scrollTop();
//                 if (document.getElementById("textres")) {
//                     y = $("#textres").scrollTop() + 40;
//                 }
//                 if (res[0] == '^tx^') {
//                     $(".loader-typo").show('fast');
//                     $(e.target).attr('rtxt', '');
//                     $.ajax({
//                         type: "POST",
//                         url: serverurl + `req2/typo_suggest`,
//                         data: {
//                             text: $(e.target).text(),
//                             a3g4d21h4k: readCookie('k55b1n5f8')
//                         },
//                         cache: false,
//                         success: function(result) {
//                             if (result.length >= 1) {
//                                 let suggestion = JSON.parse(result);
//                                 add_suggestion(suggestion, $(e.target).attr('id'));
//                                 $(".loader-typo").hide('fast');
//                                 $(e.target).attr('rtxt', suggestion.join("*"));
//                             }
//                         }
//                     });
//                 }
//                 else {
//                     add_suggestion(res, $(e.target).attr('id'));
//                 }
//                 $("#changebox").show();
//                 $("#changebox").offset({
//                     top: pageos.top + e.target.offsetTop + 20 - y,
//                     left: pageos.left + e.target.offsetLeft
//                 });
//             }
//         }
//         nid = null;
//         tclass = null;
//     }
// };

function add_suggestion(data, nid) {
    var inpute = '';
    var delit = "'";
    var length = data.length;
    inpute += "<ul class='tst' >";
    for (var i = 0; i <= length; i++) {
        if (i == length)
            inpute += "<li class='ett' onclick=\"do_skip(" + delit + nid + delit + ");\">Abaikan</li>";
        else
            inpute += "<li class='tgt' onclick=\"do_update(" + delit + nid + delit + "," + delit + data[i] + delit + ");\">" + data[i] + "</li>";
    }
    inpute += "</ul>";
    $("#changebox .suggestion").html(inpute);
}

function catchchange(auto = true) {
    return new Promise((resolve,reject) => {
        if ( editable == 1 ) {
            let process_id = tmp_id;
            let process_txt = tmp_txt;
            if ($('#' + process_id).text() != process_txt && $('#' + process_id).hasClass("ctext")) {
                // alert("Mohon maaf fitur mengubah kata secara langsung sedang dalam perbaikan");
                // console.log("catch change step 2");
                textChanged('#'+process_id, process_txt, true);
                // $('#' + process_id).attr('contenteditable', 'false');
                $(".btn-save").prop("disabled", false);
                if ( $('#' + process_id).text() == "" ) {
                $('#' + process_id).css('display', 'none');
                }
                if ( auto == true ) {
                    let final_txt = process_txt;
                    let final_id = process_id;
                    changetext(final_txt,$("#" + final_id).text()).then(change_res => {
                        if (change_res > 0)
                            show_toast("success", change_res + " kata telah berhasil diganti");
                        resolve();
                    });
                    // setTimeout(() => {
                    //     Swal.fire({
                    //         // title: 'Are you sure?',
                    //         html:
                    //             "<div style='font-size: 16px'>Ditemukan " +
                    //             total +
                    //             " kata yang sama.\nApakah anda ingin mengubah semua?</div>",
                    //         icon: "warning",
                    //         showCancelButton: true,
                    //         heightAuto: false,
                    //         focusConfirm: true,
                    //         scrollbarPadding: false,
                    //         allowOutsideClick: false,
                    //         showClass: {
                    //             popup: "",
                    //             icon: "",
                    //         },
                    //         hideClass: {
                    //             popup: "",
                    //         },
                    //         confirmButtonColor: "#3085d6",
                    //         cancelButtonColor: "rgb(183 180 180)",
                    //         cancelButtonText:
                    //             '<div style="font-size: 16px">Cancel</div>',
                    //         confirmButtonText:
                    //             '<div style="font-size: 16px">Ok</div>',
                    //         }).then((result) => {
                    //         if (result.value) {
                    //             changetext(final_txt,$("#" + final_id).text()).then(change_res => {
                    //                 show_toast("success", change_res + " kata telah berhasil diganti");
                    //             });
                    //         }
                    //         resolve();
                    //         });
                    // }, 1);
                    // if (confirm())       
                } else {
                    resolve();
                }
                tmp_id = '';
                tmp_txt = '';
            } else {
                resolve();
            }

            $('#changebox').hide();
        } else {
            resolve();
        }
    });
}

function textChanged(ele, textBefore, history=false) {
    let target = $(ele);
    if (history) {
        if (target.hasClass("greentxt")) tmp_class = "greentxt";
        else if (target.hasClass("redtxt")) tmp_class = "redtxt";
        else if (target.hasClass("underlinetxt")) tmp_class = "underlinetxt";
        addHistory(historyVar["change_text"], [target.attr("id")], [textBefore, tmp_class]);
    }
    target.removeClass("greentxt").removeClass("redtxt").removeClass("underlinetxt");
    target.css('background-color', 'rgba(127,235,235,0.3)');
    target.addClass("txt-edited");
    target.attr("origin", target.text());
}

function show_toast(icon, info) {
    const Toast = Swal.mixin({
    toast: true,
    position: 'bottom-end',
    showConfirmButton: false,
    timer: 2000,
    timerProgressBar: true,
    onOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
    })

    Toast.fire({
    icon: icon,
    title: "<div style='font-size: 16px; font-weigth: 100'>"+info+"</div>"
    })
}

document.getElementById('presult').onscroll = function(e) {
    $('#changebox').hide();
};

document.addEventListener("keydown", function(e) {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var targetEle = range.startContainer.parentNode;
    var targetId = targetEle.id;

    if ( e.keyCode == 13 ) {
        event.preventDefault();
    }


    if (tmp_id != targetId) {
      catchchange(true);
      tmp_id = targetId;
      tmp_txt = targetEle.textContent;
    }

    if (e.keyCode == 8 && targetEle.textContent.length == 1 && targetEle.getAttribute("mtxt")) {
        addHistory(historyVar["delete"], [targetEle.id], [getElementCore(targetEle), $(targetEle).prev(".ctext").attr("id")]);
        removedId.push(targetId);
        let newTarget = $(targetEle).prev(".ctext");
        $(".btn-save").prop("disabled", false);
        tmp_id = newTarget[0].id;
        tmp_txt = newTarget[0].textContent;
    }
});

document.addEventListener("keyup", function(e) {
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var targetEle = range.startContainer.parentNode;
    var targetId = targetEle.id;
    if ( e.keyCode == 13 ) {
        event.preventDefault();
    }

    if ( tmp_id != targetId ) {
        catchchange(true);
        tmp_id = targetId;
        tmp_txt = targetEle.textContent;
    }
});

document.addEventListener("mouseup", function(e) {
    var sel = window.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        var targetEle = range.startContainer.parentNode;
        var targetId = targetEle.id;

        if (tmp_id != targetId) {
            catchchange(true);
            if (targetEle.getAttribute("mtxt") != "" ) {
                tmp_id = targetId;
                tmp_txt = targetEle.textContent;
                showTypoBox(targetEle);
            }
        }
    }
});

function showTypoBox(target) {
    tclass = target.className.split(" ");
    if (tclass[1] == "redtxt") {
      var res = $(target).attr("rtxt").split("*");
      var pageos = $("#pagecontent").offset() || $("#textres").offset();
      var inpute = "";
      var delit = "'";
      var y = $("#pagecontent").scrollTop();
      if (document.getElementById("textres")) {
        y = $("#textres").scrollTop() + 40;
      }
      if (res[0] == "^tx^") {
        $(".loader-typo").show("fast");
        $(target).attr("rtxt", "");
        $.ajax({
          type: "POST",
          url: serverurl + `req2/typo_suggest`,
          data: {
            text: $(target).text(),
            a3g4d21h4k: readCookie("k55b1n5f8"),
          },
          cache: false,
          success: function (result) {
            if (result.length >= 1) {
              let suggestion = JSON.parse(result);
              add_suggestion(suggestion, $(target).attr("id"));
              $(".loader-typo").hide("fast");
              $(target).attr("rtxt", suggestion.join("*"));
            }
          },
        });
      } else {
        add_suggestion(res, $(target).attr("id"));
      }
      $("#changebox").show();
      $("#changebox").offset({
        top: pageos.top + target.offsetTop + 20 - y,
        left: pageos.left + target.offsetLeft,
      });
    }
}

function getElementCore(targetEle) {
    let newTarget = targetEle.cloneNode();
    newTarget.textContent = tmp_txt;
    newTarget.removeAttribute("rtxt");
    newTarget.removeAttribute("title");
    let currentStyle = window.getComputedStyle(newTarget);
    newTarget.style.fontStyle = currentStyle.fontStyle;
    newTarget.style.fontWeight = currentStyle.fontWeight;
    return newTarget.outerHTML;
}

// document.addEventListener("mouseover", function(e) {

// });

function detect_change_2 (e) {
    if ( ext == 'text' || ext == 'docx' ) {
        if ($(e.target).attr('mtxt') == 'word' || $(e.target).attr('mtxt') == 'other') {
            if ($('#' + tmp_id).text() != tmp_txt) {
                $('#' + tmp_id).removeClass("greentxt").removeClass("redtxt");
                $('#' + tmp_id).css('background-color', 'rgba(127,235,235,0.3)');
            }
            if (e.target.id != tmp_hover && tmp_color != '') {
                if (tmp_color == 'rgb(119, 173, 191)') {
                    if ($('#' + tmp_hover).css("background-color").substr(0, 8) != 'rgba(127' && tmp_color.substr(0, 8) != 'rgba(127')
                        $('#' + tmp_hover).css('background-color', 'transparent');

                } else if ($('#' + tmp_hover) != null && $('#' + tmp_hover) != 'undefined' && $('#' + tmp_hover).css("background-color") != null) {
                    if ($('#' + tmp_hover).css("background-color").length > 8) {
                        if ($('#' + tmp_hover).css("background-color").substr(0, 8) != 'rgba(127')
                            $('#' + tmp_hover).css('background-color', tmp_color);
                    }
                }
                tmp_color = ($(e.target).css('background-color') == 'rgb(119, 173, 191)') ? 'transparent' : $(e.target).css('background-color');
                tmp_hover = e.target.id;
                if ( $(e.target).attr('mtxt') == 'word' && $(e.target).attr('class').search("redtxt") > -1 )
                    $(e.target).css('background-color', '#77ADBF');
            }

            // if (is_drag == false) {
            //     $(e.target).attr('contenteditable', 'true');
            // }
        }
    }
}

document.addEventListener("mousedown", function(e) {
    // store a ref. on the dragged elem
    if (document.getElementById("textres")) {
        // $(".ctext").attr('contenteditable', 'false');
        if ($(e.target).attr('mtxt') == 'word') {
            $(e.target).attr('contenteditable', 'true');
        }
    }
    is_drag = true;
}, false);

// document.addEventListener("mouseup", function(e) {
//     // reset the transparency
//     is_drag = false;
// }, false);

// document.addEventListener('input', function(e) {
// });

function changeWord(ele) {
    console.log("Hey this change!", ele);
}

function placeCaretAtEnd(el) {
    if (el) el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

function do_update(rid, chtxt) {
    $('#' + rid).removeClass("greentxt").removeClass("redtxt").html(chtxt);
    $('#' + rid).css('background-color', 'rgba(127,235,235,0.3)');
    ga('send', 'event', "File", "update text", chtxt);
    $('#changebox').hide();
}

function do_skip(sid) {
    $('#' + sid).removeClass("greentxt").removeClass("redtxt");
    $('#' + sid).css('background-color', 'rgba(127,235,235,0.3)');
    ga('send', 'event', "File", "skip text");
    $('#changebox').hide();
}

function scantext(txt) {
    return $(".ctext[origin='" + txt.toLowerCase() + "']");
    // bd = document.getElementsByClassName('ctext');
    // num = 0;
    // for (var i = 0; i < bd.length; i++) {
    //     if ($(bd[i]).text() == txt) {
    //         num++;
    //     }
    // }
    // return num;
}

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

async function changetext(txt, newtxt) {
    console.time("change text");
    num = 0;
    let text;
    let tmptext;
    let change_ids = [];
    let elements = $(".ctext[origin='" + txt.toLowerCase() + "']");
    let eleLen = elements.length;
    if (eleLen == 0) return 0;
    for(let idx =0; idx < eleLen; idx++) {
        text = elements[idx].textContent
        if (text == text.toLowerCase()) {
          elements[idx].textContent = newtxt.toLowerCase();
        } else if (text == text.toUpperCase()) {
          elements[idx].textContent = newtxt.toUpperCase();
        } else if (text[0] == text[0].toUpperCase()) {
          elements[idx].textContent = capitalizeFirstLetter(newtxt);
        } else {
          elements[idx].textContent = newtxt;
        }
        textChanged(elements[idx], txt, false);
        change_ids.push(elements[idx].id);
        num++;
    };
    console.timeEnd("change text");
    // console.log("change ids", change_ids);
    addHistory(historyVar["change_text"], change_ids, [txt, tmp_class]);
    // bd = document.getElementsByClassName('ctext');
    // num = 0;
    // for (var i = 0; i < bd.length; i++) {
    //     if ($(bd[i]).text() == txt) {
    //         $(bd[i]).text(newtxt);
    //         $(bd[i]).removeClass("greentxt").removeClass("redtxt").removeClass("underlinetxt");
    //         $(bd[i]).addClass("txt-edited");
    //         $(bd[i]).css('background-color', 'rgba(127,235,235,0.3)');
    //         num++;
    //     }
    // }
    $(".btn-save").prop("disabled", false);
    ga('send', 'event', "File", "change text", txt + " -> " + newtxt, num);
    return num;
}