var DetailViewModel = function () {
    var self = this;

    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-left"
    }

    self.convertToKoObject = function (data) {
        var newObj = ko.mapping.fromJS(data);
        newObj.Selected = ko.observable(false);
        return newObj;
    }
    self.comments = ko.observableArray();
    self.totalComment = ko.observable(0);

    self.data = ko.observableArray();
    self.PageLoad = ko.observable(0);
    self.pageSize = ko.observable(100);

    self.getComment = function () {
        self.comments([]);
        self.totalComment(0);
        const detailId = $('#detailId').val();
        jQuery.ajax({
            url: '/api/Comment/loadComment/' + detailId + '/' + self.PageLoad() + '/' + self.pageSize(),
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json'
        }).done(function (result) {
            if (result.Code == 1) {
                if (result.Data.data != null) {
                    self.totalComment(result.Data.data.commentByPostId.length);
                    if (result.Data.data.commentByPostId != null && result.Data.data.commentByPostId.length > 0) {
                        jQuery.each(result.Data.data.commentByPostId, function (ex, item) {
                            self.comments.push(item)
                        })
                    }
                }
            }
        })
    }

    self.commentModel = ko.observable(
        self.convertToKoObject(
        {
            name: "",
            bodyComment: ""
        })
    );

    self.SendCmt = function () {
        if (self.commentModel().name() == "") {
            toastr.error("Vui lòng nhập Họ tên!", "Lỗi");
            return;
        }
        if (self.commentModel().bodyComment() == "") {
            toastr.error("Vui lòng nhập nội dung bình luận!", "Lỗi");
            return;
        }
        var data = {
            ParentId: 0,
            PostId: Number($('#detailId').val()),
            PostName: $('#detailTitle').val(),
            PostUrl: window.location.href,
            PostThumb: $('#detailImage').val(),
            UserId: "",
            FullName: self.commentModel().name(),
            Avatar: "",
            Message: self.commentModel().bodyComment(),
        }
        jQuery.ajax({
            url: '/api/Comment/AddComment',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',
            dataType: 'json',

        }).done(function (result) {
            self.commentModel().name('');
            self.commentModel().bodyComment('');
            toastr.success("Cảm ơn bạn đã phản hồi!", "Thành công!");
        });
    }

    self.ClickReply = function (item) {
        var hide = document.getElementById('reply_form_' + item.Id);
        hide.classList.toggle('activereply-cmt');
    }

    self.SendReply = function (item) {
        if (jQuery('#replyName_' + item.Id).val() == "") {
            toastr.error("Vui lòng nhập Họ tên!", "Lỗi");
            return;
        }
        if (jQuery('#replyComment_' + item.Id).val() == "") {
            toastr.error("Vui lòng nhập nội dung bình luận!", "Lỗi");
            return;
        }

        var data = {
            ParentId: 0,
            PostId: Number($('#detailId').val()),
            PostName: $('#detailTitle').val(),
            PostUrl: window.location.href,
            PostThumb: $('#detailImage').val(),
            UserId: "",
            FullName: jQuery('#replyName_' + item.Id).val(),
            Avatar: "",
            Message: jQuery('#replyComment_' + item.Id).val(),
        }
        jQuery.ajax({
            url: '/api/Comment/AddComment',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: 'application/json',
            dataType: 'json',

        }).done(function (result) {
            jQuery('#replyName_' + item.Id).val('')
            jQuery('#replyComment_' + item.Id).val('')
            jQuery("#reply_form_" + item.Id).next().slideToggle(200);
            toastr.success("Cảm ơn bạn đã phản hồi!", "Thành công!");
        });
    }

    function copyStringToClipboard(string) {
        var textarea;
        var result;
        try {
            textarea = document.createElement('textarea');
            textarea.setAttribute('readonly', true);
            textarea.setAttribute('contenteditable', true);
            textarea.style.position = 'fixed';
            textarea.value = string;

            document.body.appendChild(textarea);

            textarea.focus();
            textarea.select();

            var range = document.createRange();
            range.selectNodeContents(textarea);

            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);

            textarea.setSelectionRange(0, textarea.value.length);
            result = document.execCommand('copy');
        } catch (err) {
            console.error(err);
            result = null;
        } finally {
            document.body.removeChild(textarea);
        }

        if (!result) {
            var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
            var copyHotkey = isMac ? '⌘C' : 'CTRL+C';
            result = prompt('Press ' + copyHotkey, string);
            if (!result) {
                return false;
            }
        }
        return true;
    }
    self.url = ko.observable(document.URL)
    self.copylink = function () {
        copyStringToClipboard(document.URL);
        toastr.success("Copy link thành công!");
    }

    //Modal shared
    self.Shared = function () {
        if (navigator.share) {
            const title = document.title;
            const header = $('#detailTitle').val();
            navigator.share({
                title,
                text: header,
                url: window.location.href
            });
        }
    };
}
$(function () {
    var viewModel = new DetailViewModel();
    ko.applyBindings(viewModel);
    viewModel.getComment();
});