import $ from 'jquery';
import moment from 'moment';
import {api} from './api';
import "modal-video/js/jquery-modal-video.js";
import "modal-video/css/modal-video.min.css";
import {email as emailValid} from 'vuelidate/lib/validators';
import Cookies from 'js-cookie';
import Bowser from "bowser";

moment.locale('ru');

var selectedWeekdays = {};
$(document).ready(function () {
    let body = $('body'),
        popup = $('.popup.visible.open'),
        prevPopup = null;

    // CAPTURE EMAIL
    const EMAIL_CAPTURED_COOKIE = 'email-captured';

    if(window.LIL_STORE.user.id){
        Cookies.remove(EMAIL_CAPTURED_COOKIE);
    }

    const captureEmail = show => {
        return new Promise((resolve, reject) => {
            prevPopup = popup;
            popup = $('.js-popup-capture-email');
            const $email = popup.find('.capture-email__email');
            const $error = popup.find('.capture-email__error');
            $email.val('');
            $error.text('');
            popup.css('z-index', 1000001);
            if(show){
                showPopup();
            }
            $('.js-popup-capture-email .js-popup-close').unbind('click').on('click', e => {
                e.preventDefault();
                hidePopup().then(() => {
                    popup = prevPopup;
                    reject();
                });
            });
            popup.find('.capture-email__btn').unbind('click').click(e => {
                e.preventDefault();
                const email = $email.val();
                if(! email){
                    $error.text('Пожалуйста, укажите почту');
                    return;
                }
                if(! emailValid(email)){
                    $error.text('Пожалуйста, укажите корректную почту');
                    return;
                }
                const $loader = popup.find('.loading-loader');
                const $btn = popup.find('.capture-email__btn');
                $loader.show();
                $btn.prop('disabled', true);
                api.captureEmail(email).then(resolve).catch(reject).finally(() => {
                    $btn.prop('disabled', false);
                    $loader.hide();
                    hidePopup().then(() => {
                        popup = prevPopup;
                    });
                });
            });
        });
    };

    $(".js-video-modal").each(function(){
        const $this = $(this);
        const url = $this.data('videoUrl');
        if(! url){
            return;
        }
        let data;
        let videoId;
        let channel;
        if(url.indexOf('youtu.be') > -1){
            videoId = url.split('youtu.be/')[1];
            channel = 'youtube';
        }
        if(url.indexOf('youtube.com') > -1 && url.indexOf('watch') > -1){
            const m = /[?&]v=([^&]+)(&.+)?$/.exec(url);
            channel = 'youtube';
            videoId = m && m[1];
        }
        if(url.indexOf('vimeo.com') > -1){
            const split = url.split('/');
            channel = 'vimeo';
            videoId = split[split.length - 1];
        }
        $this.attr('data-video-id', videoId);
        $this.attr('data-video-url', '');
        $this.attr('data-channel', channel);
        $this.modalVideo({ channel, jsapi: true });
    });

    $(".js-video-modal").on('player-created', e => {
        if(window.LIL_STORE.user.id || ! $(e.target).data('trialLesson') || Cookies.get(EMAIL_CAPTURED_COOKIE)){
            return;
        }
        const channel = $(e.target).data('channel');
        const player = e.detail.player;
        let timeout = null;
        const interval = 1000 * 60; // 1 min
        const pauseVideo = () => {
            timeout = setTimeout(() => {
                clearTimeout(timeout);
                const $modalVideo = $('.modal-video');
                if(! $modalVideo.length){
                    return;
                }
                if(channel == 'youtube'){
                    player.pauseVideo();
                }
                else if(channel == 'vimeo'){
                    player.pause();
                }
                $modalVideo.css('opacity', 0);
                captureEmail(true).then(() => {
                    $modalVideo.css('opacity', 1);
                    Cookies.set(EMAIL_CAPTURED_COOKIE, 1);
                    if(channel == 'youtube'){
                        player.playVideo();
                    }
                    else if(channel == 'vimeo'){
                        player.play();
                    }
                }).catch(() => {
                    $('.modal-video').remove();
                });
            }, interval);
        }
        if(channel == 'youtube'){
            window.onYTPlayerStateChange = (event) => {
                if(event.data == YT.PlayerState.PLAYING && ! timeout){
                    pauseVideo();
                }
                if(event.data == YT.PlayerState.ENDED && timeout){
                    clearTimeout(timeout);
                }
            }
            player.addEventListener('onStateChange', 'onYTPlayerStateChange');
        }
        else if (channel == 'vimeo'){
            player.on('play', () => {
                if(! timeout){
                    pauseVideo();
                }
            })
            player.on('ended', () => {
                if(timeout){
                    clearTimeout(timeout);
                }
            });
        }
    });

    body.on('click', '[data-popup]', function(e){
        const $this = $(this);
        let data = $this.data('popup');
        if(! data) {
          return true;
        }
        e.preventDefault();
        e.stopPropagation();

        popup = $(data);

        if(data === '.js-popup-buy') {
            popup.data('date-start', $this.data('date-start') || '');
            popup.data('day', $this.data('day') || '');
            popup.data('is-camp', $this.data('is-camp') || '');
            $('[data-day]').prop('checked', false);

            if(! window.LIL_STORE.user.id) {
                const $btn = popup.find('.buy__btn');
                $btn.click(function(event) {
                    event.preventDefault();
                    hidePopup().then(() => {
                        popup = $('.js-popup-auth');
                        popup.data('next-url', $btn.attr('href'));
                        showPopup();
                    });
                });
            }

            if ($this.data('is-camp')) {
                $('[data-day]').each(function(){
                    $(this).prop('checked', true).prop('disabled', true);
                });
            }
            else if ($this.data('prolong')) {
                $('[data-day][data-purchased]').each(function(){
                    $(this).prop('checked', true).prop('disabled', false);
                });
            }
            else{
                if($this.data('day')) {
                    let day = $this.data('day');
                    $('[data-day][data-purchased]').each(function(){
                        $(this).prop('checked', false).prop('disabled', true);
                    });
                    $('[data-day='+day+']').prop('checked', true);
                }
                else{
                    $('[data-day]').each(function(){
                        $(this).prop('checked', true).prop('disabled', false);
                    });
                }
            }
            popup.on('change', '[data-day]', function(){
                updateCart();
            });

            popup.on('change', '[data-bonuses]', function(){
                updateCart();
            });

            updateCart();
        }

        if(data === '.js-popup-course-buy'){
            const updateCourseCart = () => {
                const $orderPrice = popup.find('.order_price_text');
                const useBonuses = $bonusesCheckbox.prop('checked');
                const amount = useBonuses ? coursePrice - bonusesCount : coursePrice;

                $orderPrice.html(amount !== coursePrice ? `<del>${coursePrice}</del> ${amount}р.` : `${amount}р.`);
                $buyBtn.attr('href', link + '?' + decodeURIComponent($.param({
                    use_bonuses: useBonuses || ''
                })));
            }
            const $buyBtn = popup.find('.but_btn_popup');
            const link = $buyBtn.data('link');
            const coursePrice = +$buyBtn.data('price').replace(',', '.');
            const $bonuses = popup.find('.buy__bonuses');
            const $bonusesCount = popup.find('.buy__bonuses-count');
            const $bonusesCheckbox = popup.find('[data-bonuses]');
            const bonuses = +$bonusesCheckbox.data('bonuses');
            const bonusesCount = bonuses > coursePrice ? coursePrice : bonuses;
            const isCourseLock = $this.data('course-lock');

            popup.find('.buy__subtitle').css('display', isCourseLock ? '' : 'none');

            $bonuses.hide();
            if(bonuses){
                $bonusesCount.text(bonusesCount + ' Lil');
                $bonuses.show();
            }

            popup.on('change', '[data-bonuses]', updateCourseCart);
            updateCourseCart();
        }

        if( data === '.js-popup-auth') {
            let nextUrl = $this.data('auth-next-url');
            if(nextUrl === 'href') {
                nextUrl = $this.attr('href');
            }
            popup.data('next-url', nextUrl);
        }

        if( data === '.js-popup-enter-gift-code') {
            const $giftCode = popup.find('.enter-gift-code__code');
            const $giftError = popup.find('.enter-gift-code__error');
            $giftCode.val('');
            $giftError.text('');
            popup.find('.enter-gift-code__btn').one('click', () => {
              const code = $giftCode.val();
                if(! code){
                  $giftError.text('Укажите код');
                  return false;
                }
                window.location.href = `/gift-certificate/${code}/get`;
            });
        }

        const showDef = showPopup();

        if( data === '.js-popup-auth') {
            showDef.then(() => {
                const login = popup.find('.js-auth-login');
                const pass = popup.find('.js-auth-pass');
                pass.css('display', 'none');
                login.css('display', 'block');
            });
        }

        if(data === '.js-popup-ref-link') {
            showDef.then(() => {
                $('#referrer-url').select();
            });
        }
    });

    $('.js-popup-close').on('click', function(e){
        if(popup.data('manual-close')){
            return;
        }
        e.preventDefault();
        hidePopup();
    });

    body.on('click', '.js-outer', function(){
        if (popup !== undefined && ! popup.data('manual-close')) {
            hidePopup();
        }
    });

    $('.js-popup-wrap').on('click', function(e){
        e.stopPropagation();
    });

    $(document).keyup(function(e){
        if (e.keyCode === 27 && ! popup.data('manual-close')) {
            hidePopup();
        }
    });


    if(window.LIL_STORE.flags.isGiftCertificateUrl){
        popup = $('.js-popup-gift-certificate');
        showPopup();
    }

    if(window.LIL_STORE.user.id && window.LIL_STORE.user.hasNewBonuses && window.LIL_STORE.user.bonus > 0){
        $(document).ready(() => {
            popup = $('.js-popup-bonuses-came');
            const $bonusesImg = popup.find('.bonuses-came__img');
            const $bonusesValue = popup.find('.bonuses-came__bonuses');
            showPopup();
            const audioAddition = new Audio();
            const audioSalut = new Audio();
            audioAddition.preload = 'auto';
            audioSalut.preload = 'auto';
            const browser = Bowser.parse(window.navigator.userAgent).browser.name.toLowerCase();
            if(browser.indexOf("firefox") > -1 || browser.indexOf("opera") > -1){
                audioAddition.src = window.LIL_STORE.staticUrl +  'sounds/Lil_World_Addition.ogg';
                audioSalut.src = window.LIL_STORE.staticUrl +  'sounds/Lil_World_Jingle_08.ogg';
            }
            else{
                audioAddition.src = window.LIL_STORE.staticUrl +  'sounds/Lil_World_Addition.mp3';
                audioSalut.src = window.LIL_STORE.staticUrl +  'sounds/Lil_World_Jingle_08.mp3';
            }
            audioAddition.play().catch(error => console.log(error));
            $bonusesImg.attr('src', window.LIL_STORE.staticUrl + 'img/lilcoin48x54.png')
                .attr('src', window.LIL_STORE.staticUrl + 'img/lilcoin_spin.gif');
            $({bonuses: 0}).animate({bonuses: window.LIL_STORE.user.bonus}, {
                duration: 2900,
                easing: "linear",
                step: function(val) {
                  $bonusesValue.html(Math.ceil(val));
                }
            });
            api.post('/api/v1/notified-about-bonuses/', {
                user: window.LIL_STORE.user.id
            });
            popup.find('.js-popup-close').click(() => {
                hidePopup().then(() => {
                    const $salut = $('.header__lil-coin-img-salut');
                    const $lilcoin = $('.header__lil-coin-img');
                    $lilcoin.animate({opacity: 0}, 200);
                    $salut.attr('src', '').attr('src', window.LIL_STORE.staticUrl + 'img/lilcoin_salut.gif')
                        .animate({opacity: 100}, 200);
                    audioSalut.play();
                    setTimeout(() => {
                      $salut.animate({opacity: 0}, 500);
                      $lilcoin.animate({opacity: 100}, 500);
                    }, 2000);
                });
            })
        });
    }

    function showPopup(){
        if(! popup && popupName){
            popup = $(popupName);
        }
        body.addClass('no-scroll');
        popup.addClass('open');
        return new Promise((resolve) => {
          setTimeout(function(){
              popup.addClass('visible');
              resolve();
              $(document).trigger('popup-opened', [popup]);
          }, 100);
        });
    }

    function hidePopup(){
        body.removeClass('no-scroll');
        popup.removeClass('visible');
        popup.data('next-url', null);

        if($('#password-reset__sent').is(':visible')) {
            window.location.reload();
        }
        return new Promise((resolve) => {
            setTimeout(function(){
                popup.removeClass('open');
                resolve();
                $(document).trigger('popup-closed', [popup]);
            }, 300);
        });
    }

    function updateCart(){
        var link = popup.find('.but_btn_popup').data('link');
        var $order = popup.find('.order');
        var $orderPrice = popup.find('.order_price_text');
        var $orderDates = popup.find('.order__dates');
        var dateStart = popup.data('date-start');
        var days = ['', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
        var weekdays = [];
        var daysText = [];
        var $bonuses = popup.find('.buy__bonuses');
        var $bonusesCheckbox = popup.find('[data-bonuses]');
        var $bonusesCount = popup.find('.buy__bonuses-count');
        var useBonuses = $bonusesCheckbox.prop('checked');
        var bonuses = +$bonusesCheckbox.data('bonuses');
        $('[data-day]').each(function() {
            var weekday = $(this).data('day');
            if($(this).is(':checked')) {
                weekdays.push(weekday);
                daysText.push(days[weekday]);
            }
        });

        if(weekdays.length){
            $order.addClass('order--loading');
            $orderPrice.html('');
            api.getPaymentAmount({ user: window.LIL_STORE.user.id, weekdays: weekdays, date_start: dateStart,
                is_camp: popup.data('is-camp')})
            .then(response => {
                $order.removeClass('order--loading');
                var text = '';
                var amount = +response.data.amount;
                if(bonuses){
                    $bonusesCount.text(bonuses > amount ? amount : bonuses + ' Lil');
                    $bonuses.show();
                    if(useBonuses) {
                        amount = bonuses > amount ? 0 : amount - bonuses;
                    }
                }
                if(response.data.price != amount) {
                    text = '<del>' + response.data.price+'</del> ' + amount + 'р.';
                } else {
                    text = amount + 'p.';
                }
                $orderPrice.html(text);
                $orderDates.text(moment(response.data.date_start).format('D MMM') + ' - ' + moment(response.data.date_end).format('D MMM'));
                $('.but_btn_popup').attr('href', link+'?'+decodeURIComponent($.param({
                    weekdays: weekdays,
                    date_start: moment(response.data.date_start).format('YYYY-MM-DD'),
                    use_bonuses: useBonuses || '',
                }, true)));
            }).catch(() => {
                $order.removeClass('order--loading');
            });
        }
        else {
            $orderPrice.html('0p.');
            $bonuses.hide();
        }

    }
});