import $ from 'jquery';
import createHistory from 'history/createBrowserHistory';

// Создаем объект history API
const history = createHistory();

$(document).ready(function () {
    // Обработчик кнопки "Подгрузить еще"
    $('.courses').on('click', 'button.load__btn', function () {
        load_courses($(this).attr('data-next-page-url'), false);
    });

    // Обработчик выбора категории
    $('div.js-select-option[data-category-option]').on('click', function (e) {
        e.preventDefault();
        history.replace($(this).attr('data-category-url'));
        load_courses($(this).attr('data-category-url'), true);
    });

    // Обработчик лайков
    $('.courses').on('click', 'a[data-course-likes]', function (e) {
        e.preventDefault();

        const likedCourseElement = $(this);
        const courseID = $(this).attr('data-course-id');
        let isLiked = !!parseInt($(this).attr('data-liked'));
        let likesCount = parseInt($(this).attr('data-course-likes-count'));
        isLiked = !isLiked;
        likesCount = isLiked ? likesCount + 1 : likesCount - 1;
        likedCourseElement.children('.likes__counter').text(likesCount);
        likedCourseElement.attr('data-course-likes-count', likesCount);
        if (isLiked) {
            likedCourseElement.addClass('active');
            likedCourseElement.attr('data-liked', '1');
        } else {
            likedCourseElement.removeClass('active');
            likedCourseElement.attr('data-liked', '0');
        }

        $.ajax(`/course/${courseID}/like`, {
            method: 'POST'
        })
            .done(function (data) {
                if (data.success === true) {
                    $(this).children('.likes__counter').text(data.likes_count);
                    likedCourseElement.attr('data-course-likes-count', data.likes_count);
                    if (data.is_liked) {
                        likedCourseElement.addClass('active');
                        likedCourseElement.attr('data-liked', '1');
                    } else {
                        likedCourseElement.removeClass('active');
                        likedCourseElement.attr('data-liked', '0');
                    }
                }
            })
            .fail(function (xhr) {
                isLiked = !isLiked;
                likesCount = isLiked ? likesCount + 1 : likesCount - 1;
                likedCourseElement.children('.likes__counter').text(likesCount);
                likedCourseElement.attr('data-course-likes-count', likesCount);
                if (isLiked) {
                    likedCourseElement.addClass('active');
                    likedCourseElement.attr('data-liked', '1');
                } else {
                    likedCourseElement.removeClass('active');
                    likedCourseElement.attr('data-liked', '0');
                }
            });
    })
});

function load_courses(coursesUrl, fromStart) {
    $('.courses__list').css('opacity', '0.9');
    const buttonElement = $('.courses').find('button.load__btn');
    if (!fromStart) {
        buttonElement.addClass('loading');
    }
    $.ajax(coursesUrl, {
        method: 'GET'
    })
        .done(function (data) {
            if (data.success === true) {
                if (!fromStart) {
                    $('.courses__list').append(data.content);
                } else {
                    $('.courses__list').html(data.content);
                }
                if (data.next_url) {
                    buttonElement.attr('data-next-page-url', data.next_url)
                } else {
                    buttonElement.hide()
                }
            }
        })
        .fail(function (xhr) {

        })
        .always(function () {
            $('.courses__list').css('opacity', '1');
            if (buttonElement) {
                buttonElement.removeClass('loading');
            }
        });
}