let cur_page = 1;
let duplicate_clicked = false;

$(document).ready(() => {
    $('.reply_write').append(getMyReplySetting());
    loadGameCommentList(cur_page, true);
});

// 게임 평점 모달 제어
$('.btn_like').click(() => {
    $('#popGameLike').show();
});

// 게임 풀스크린 모달 제어
$('.btn_full').click(() => {
    let elem = $('#game_frame')[0].contentDocument.documentElement;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
        elem.msRequestFullscreen();
    }
});

// 댓글 등록
function fnCommentSubmit(t_area, parent_rid) {
    this.event.preventDefault();
    if (login) {
        if (!t_area && !duplicate_clicked) {
            let text;
            duplicate_clicked = true;
            if (parent_rid) {
                text = $('#comment_reply_'+parent_rid+' textarea').val();
            } else {
                text = $('.reply_write textarea').val();
            }
            if (text.length <= 0) {
                alert(post_empty);
                return false;
            }
            
            if (text.length > 600) {
                alert(post_notice);
                return false;
            }

            const formData = new FormData();
            formData.append('image', $('#img_upload_'+parent_rid)[0].files[0]);
            formData.append('gid', gid);
            formData.append('text', text);
            formData.append('parent_rid', parent_rid);

            $.ajax({
                dataType: "json",
                type: "post",
                processData: false,
                contentType: false,
                data: formData,
                url: "/comment_reg",
                success: function(data) {
                    duplicate_clicked = false;
                    if (data.result) {
                        // 댓글 다시 로딩
                        loadGameCommentList(cur_page, true);
                        $('textarea').val('');
                        $('#img_upload_'+parent_rid).val('');
                        $('.re_reply_write').remove();
                        setImagePreview(null);
                    }
                }
            });
        }
    } else {
        alert(post_login);
        $('#btnLogin').click();
    }
    return false;
}

// 내 댓글 영역
function getMyReplySetting(parent_rid = 0) {
    //대댓글 달기 영역
    strHtml = '';
    strHtml += '<div class="top">';
    if (login) {
        strHtml += '    <div class="profile _small">';
        strHtml += '         <div class="thm"><img src="' + login['img'] + '" alt="프로필 이미지" onerror="this.onerror = null; this.src=\'https://ssl.pstatic.net/static/pwe/address/img_profile.png\'"/></div>';
        strHtml += '            <i class="icon_lv lv_' + login['level'] + '">' + login['level'] + '</i>';
        strHtml += '    </div>';
        strHtml += '    <div class="nick">' + login['nick'] + '<span class="group">[' + login['group'] + ']</span></div>';
    }
    strHtml += '    <div class="buttons">';
    strHtml += '        <div class="img_upload_wrap" id="upload_'+parent_rid+'">';
    strHtml += '            <button type="button" class="thumb_img_upload" style="display:none" onClick="setImagePreview(null, '+parent_rid+')">';
    strHtml += '                <div class="img_box"><img src="" alt=""/></div>';
    strHtml += '                <div class="btn_close"><i></i></div>';
    strHtml += '            </button>';
    strHtml += '            <label class="btn btn_img_upload" for="img_upload_'+parent_rid+'"><i></i></label>';
    strHtml += '            <input type="file" id="img_upload_'+parent_rid+'" onchange="setImagePreview(this, '+parent_rid+')" accept="image/*"/>';
    strHtml += '        </div>';
    strHtml += '        <button type="submit" class="btn btn_reply_submit" onClick="fnCommentSubmit(false, ' + parent_rid + ')">' + post + '</button>';
    strHtml += '    </div>';
    strHtml += '</div>';
    strHtml += '<textarea placeholder="' + post_notice + '" onclick="fnCommentSubmit(true, ' + parent_rid + ')"></textarea>';
    return strHtml;
}

// 댓글 이미지 미리보기 아이콘
function setImagePreview(input, parent_rid) {
    if (input != null && input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            $('#upload_'+parent_rid+' .img_box img').attr('src', e.target.result);
            $('#upload_'+parent_rid+' .thumb_img_upload').show();
        }
        reader.readAsDataURL(input.files[0]);
    } else {
        $('#upload_'+parent_rid+' #img_upload_'+parent_rid).val('');
        $('#upload_'+parent_rid+' .img_box img').attr('src', '');
        $('#upload_'+parent_rid+' .thumb_img_upload').hide();
    }
}

// 댓글 리스트 로딩
function loadGameCommentList(page, first_load = false) {
    $.ajax({
        dataType: "json",
        type: "post",
        data: {
            "gid": gid,
            "page": page,
        },
        url: "/comment_list",
        success: function (data) {
            strHtml = '';

            // 댓글 갯수
            $('#comment_count').text(data.count);
            $('.reply_cmt .pagination').remove();
            $('.reply_cmt').append(data.pagination);

            cur_page = page;

            for (let comment of data.list) {
                // 댓글 영역
                strHtml += '<li class="reply_view" id="comment_'+comment.rid+'">';
                strHtml +=      '<div class="top">';
                strHtml +=          '<div class="profile _small">';
                strHtml +=              '<div class="thm">';
                strHtml +=                  '<img src="'+comment['img']+'" alt="프로필 이미지" onerror="this.onerror = null; this.src = \'https://ssl.pstatic.net/static/pwe/address/img_profile.png\'">';
                strHtml +=              '</div>';
                strHtml +=              '<i class="icon_lv lv_'+comment['level']+'">'+comment['level']+'</i>';
                strHtml +=          '</div>';
                strHtml +=          '<div class="nick">';
                strHtml +=              comment['nick']+'<span class="group">['+comment['group']+']</span>';
                strHtml +=              '<div class="time">'+comment['reg_date']+' '+comment['reg_time']+'</div>';
                strHtml +=          '</div>';
                strHtml +=          '<div class="buttons">';
                strHtml +=              '<button type="submit" class="btn btn_reply_report" onclick="reportComment('+comment.rid+')">'+(comment.my_reply ? remove : report)+'</button>';
                strHtml +=              '<button type="submit" class="btn btn_reply_re" onclick="toggleMyReply(this, '+comment.rid+')">'+reply+'</button>';
                strHtml +=          '</div>';
                strHtml +=      '</div>';
                strHtml +=      '<div class="r_comment '+(comment['status'] > 1 ? 'r_delete' : '')+'">';
                strHtml +=      comment['reply'];
                if (comment['reply_img']) {
                    strHtml +=  '<div class="r_picture">';
                    strHtml +=      '<img src="'+comment['reply_img']+'" alt="">';
                    strHtml +=  '</div>';
                }
                strHtml +=      '</div>';
                strHtml += '</li>';

                //대댓글 영역
                let child_comment = comment['child_comment'];
                for (let child_data of child_comment) {
                    strHtml += '<li class="re_reply_view" id="comment_'+child_data['rid']+'">';
                    strHtml +=      '<div class="top">';
                    strHtml +=          '<div class="profile _small">';
                    strHtml +=              '<div class="thm">';
                    strHtml +=                  '<img src="'+child_data['img']+'" alt="프로필 이미지" onerror="this.onerror = null; this.src = \'https://ssl.pstatic.net/static/pwe/address/img_profile.png\'">';
                    strHtml +=              '</div>';
                    strHtml +=              '<i class="icon_lv lv_'+child_data['level']+'">'+child_data['level']+'</i>';
                    strHtml +=          '</div>';
                    strHtml +=          '<div class="nick">';
                    strHtml +=              child_data['nick']+'<span class="group">['+child_data['group']+']</span>';
                    strHtml +=              '<div class="time">'+child_data['reg_date']+' '+child_data['reg_time']+'</div>';
                    strHtml +=          '</div>';
                    strHtml +=          '<div class="buttons">';
                    strHtml +=              '<button type="submit" class="btn btn_reply_report" onclick="reportComment('+child_data['rid']+')">'+(child_data['my_reply'] ? remove : report)+'</button>';
                    strHtml +=          '</div>';
                    strHtml +=      '</div>';
                    strHtml +=      '<div class="r_comment '+(child_data['status'] > 1 ? 'r_delete' : '')+'">';
                    strHtml +=      child_data['reply'];
                    if (child_data['reply_img']) {
                        strHtml += '<div class="r_picture">';
                        strHtml +=      '<img src="'+child_data['reply_img']+'" alt="">';
                        strHtml += '</div>';
                    }
                    strHtml +=      '</div>';
                    strHtml += '</li>';
                }
            }
            
            // 기존 댓글 데이터 삭제 후 새 데이터 삽입
            $('.reply_view').remove();
            $('.re_reply_view').remove();
            $('.reply_list').append(strHtml);

            if (!first_load) {
                $('.reply_inner').scrollTop(0);
                location.href = '#comment_grid';
            }
        }
    });
}


/**
 * 답글 누를 시 내 입력 영역 온/오프
 */
function toggleMyReply(obj, rid) {
    if ($('#comment_reply_'+rid).length) {
        $('#comment_reply_'+rid).remove();
    } else {
        if ($(obj).hasClass('btn_reply_re')) {
            obj = $(obj).parent().parent().parent();
        }

        next = $(obj).next();
        console.log(next);
        if (next === undefined || !next.length) {
            // 답글이 없는 맨 마지막 댓글이면 바로 추가.
            $(obj).after('<li class="re_reply_write" id="comment_reply_'+rid+'">'+getMyReplySetting(rid)+'</li>');
        } else if (next.hasClass('re_reply_view')) {
            // 답글이 추가로 있을 경우 다음 대상 검색
            toggleMyReply(next, rid);
        } else {
            // 답글이 추가로 없으면 마지막에 추가.
            next.before('<li class="re_reply_write" id="comment_reply_'+rid+'">'+getMyReplySetting(rid)+'</li>');
        }
    }
}

/**
 * 댓글 신고 혹은 자신 댓글이면 삭제
 * @param rid
 */
function reportComment(rid) {
    $.ajax({
        dataType: "json",
        type: "post",
        data: {
            "gid": gid,
            "rid": rid,
        },
        url: "/comment_report",
        success: function (data) {
            if (data.result && data.delete) {
                $('#comment_'+rid).remove();
            }
            alert(data.comment);
        }
    });
}