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

// Likely
// import 'ilyabirman-likely/release/likely.css';
import 'ilyabirman-likely/release/likely.js';

moment.locale('ru');

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

$(document).ready(function () {
    const categoryName = $('div.js-select-option.active[data-category-option]').attr('data-category-name');
    let category = $('div.js-select-option.active[data-category-option]').attr('data-category');
    let age =  $('div.js-select-option.active[data-age-option]').data('age');
    let page = 1;
    if(category) {
        $('.js-select[data-category-select] .js-select-head').text(categoryName);
    }
    // Обработчик отложенных курсов
    setInterval(() => {
        $('div[data-future-course]').each((_, element) => {
            const courseTime = parseInt($(element).attr('data-future-course-time')) + LIL_SERVER_TIME_DIFF;
            const relativeTimeString = moment(courseTime, 'X').fromNow();

            $(element).find('div.courses__time').text(relativeTimeString);
            $(element).find('div.video__time').text(relativeTimeString);
        });
    }, 1000);

    // Обработчик кнопки "Подгрузить еще"
    $('.courses').on('click', 'button.load__btn', function () {
        page++;
        loadCourses();
    });

    // Обработчик выбора категории
    $('div.js-select-option[data-category-option]').on('click', function (e) {
        e.preventDefault();
        const categoryName = $(this).attr('data-category-name');
        $('[data-category-name]').removeClass('active');
        $(`[data-category-name='${categoryName}']`).addClass('active');
        category = $(this).attr('data-category');
        page = 1;
        loadCourses(true);
    });

    // Обработчик выбора возраста
    $('div.js-select-option[data-age-option]').on('click', function (e) {
        e.preventDefault();
        const currentAge = $(this).attr('data-age-name');
        $('[data-age-name]').removeClass('active');
        $(`[data-age-name='${currentAge}']`).addClass('active');
        age = $(this).attr('data-age');
        page = 1;
        loadCourses(true);
    });

    // Обработчик лайков
    $('.container').on('click', 'a[data-course-likes]', function (e) {
        e.preventDefault();
        if (typeof $(this).data('popup') !== 'undefined') {
            return;
        }

        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) {
                    likedCourseElement.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 loadCourses(replaceHistory) {
        $('.courses__list').css('opacity', '0.9');
        const buttonElement = $('.courses').find('button.load__btn');
        let coursesUrl = window.LIL_STORE.urls.courses + '?' + $.param({
                category,
                age,
            });
        if (page > 1) {
            buttonElement.addClass('loading');
        }
        if(replaceHistory){
            history.replace(coursesUrl);
        }
        coursesUrl += `&page=${page}`;
        $.ajax(coursesUrl, {
            method: 'GET'
        })
            .done(function (data) {
                if (data.success === true) {
                    if (page > 1) {
                        $('.courses__list').append(data.content);
                    } else {
                        $('.courses__list').html(data.content);
                    }
                    if (data.next_url) {
                        buttonElement.show();
                    } else {
                        buttonElement.hide()
                    }
                }
            })
            .fail(function (xhr) {
                if (xhr.status === 404) {
                    // Нет результатов, скрываем кнопку
                    buttonElement.hide();
                }
            })
            .always(function () {
                $('.courses__list').css('opacity', '1');
                if (buttonElement) {
                    buttonElement.removeClass('loading');
                }
            });
    }
});