import {
    store,
    animateBoughtTickets,
    // animateDivs,
    // pushNewTicketsAnimation,
    ticketThingsBoughtTickets,
    ticketThings,
} from './keno.js';
import {
    initialize
} from './initialize.js';
import * as b_tickets from './bought_tickets.js';
// import * as extra from './extra.js';


let oldRandomTicketsCache;

// Invokes animateBoughtTickets function with the right position calculations and divs passed as argument by Screen (Premade/Manual)
function generateRandomTicketsAnimation(plusBtn) {
    const ns = store.getState();

    const animationWrapper = $(plusBtn); // from which container

    // const ticketsContainerPremade = $('#tickets_container_premade'); // to which container
    const premadeTicketsContainer = $('#rollingTicketsAnimation');
    // $('#keno_bh_layout1').addClass('overflow_hidden'); // on "generate random tickets" add class to hide overflow of tickets

    /* Helps with finding from where to where animation must be played */

    const usrAgent = navigator.userAgent;
    const leftEnd = LeftByDevice(animationWrapper, usrAgent);
    const topEnd = topEndByDevice(animationWrapper, usrAgent);
    const heightEnd = topEnd + premadeTicketsContainer.height();

    // const ticketsVisible = ticketsContainerPremade.find('.ktbought:visible'); //tickets to copy
    const tickets = premadeTicketsContainer.find('.ktbought');
    // tickets.prepend(ticketsVisible.eq(0).clone().addClass('basierPremadeTickets').removeClass('clicked'));; //tickets to copy

    /* PremadeTicketsScreen animation */
    if (ns.localstate.show_15_tickets !== 1) return;
    const ticketPosition = animationWrapper.position();

    let range = 15;
    if (plusBtn === '.btn-plus10') range = 10;
    // copy 15 visible random tickets
    for (let index = 0; index < range; index++) {
        /* Calculating positions and taking the right divs before pass them as arguments to animateFunction */
        // const animatedTicketDiv = tickets.eq(index).clone().addClass('basierPremadeTickets').removeClass('clicked');
        const animatedTicketDiv = tickets.eq(index).clone().addClass('basierPremadeTickets').removeClass('clicked');
        animatedTicketDiv.addClass('ticketsStyle');
        animateBoughtTickets(ticketPosition.top / 10, ticketPosition.left, index, animatedTicketDiv, leftEnd, topEnd, plusBtn);
    }

    const interval = 500;
    /* Updates ticketDiv after animation */

    setTimeout(() => ticketThings(), 1);
    setTimeout(() => ticketThings(), Number(interval / 2)); //use for bought tickets ()
    setTimeout(() => ticketThings(), Number(interval * 2 / 3));
    return;
}

// Top position animation according to the device
function topEndByDevice(animationWrapper, userAgent) {
    return {
        'iPhone': $('#game').height() / 4.43, // jQuery .position() doesn't work on IOS devices. This is a hardcore solution which works for now.
        'ipad': $('#game').height() / 4.43, // jQuery .position() doesn't work on IOS devices. This is a hardcore solution which works for now.
        'Android': animationWrapper.position().top + 30,
        null: animationWrapper.position().top + 30,
    }[navigator.userAgent.match(userAgent)];
}

// Left position animation according to the device
function LeftByDevice(animationWrapper, userAgent) {
    return {
        'iPhone': $('#game').width() / 12.35, // jQuery .position() doesn't work on IOS devices. This is a hardcore solution which works for now.
        'Mac OS X': $('#game').width() / 12.35, // jQuery .position() doesn't work on Mac OS devices. This is a hardcore solution which works for now.
        null: animationWrapper.position().left + animationWrapper.width()
    }[navigator.userAgent.match(userAgent)];
}

function rollingTicketsAnimation() {
    // console.warn(ns.localstate.rollingTickets.length);
    $('#rollingTicketsAnimation').remove(); // remove div before append
    $('#tickets_container_premade').append($('<div id="rollingTicketsAnimation"></div>'))
    $('#keno_bh_layout1').addClass('overflow_hidden'); // on "generate random tickets" add class to hide overflow of tickets

    /* GENERATING 45 tickets for rolling animation usage */
    const rollingTickets = store.getState().localstate.rollingTickets;
    ticketThings();
    // $('rollingTicketsAnimation .ktbought_ticketid_text').hide();

    rollingTickets.forEach((ticket, index) => {
        $('#rollingTicketsAnimation').append(b_tickets.createTicket(ticket)); // create divs
        b_tickets.fillTicketData(ticket, index + 15, b_tickets.target.RANDOM_TICKETS_ANIMTION); // fill divs
    });
}

export {
    generateRandomTicketsAnimation,
    rollingTicketsAnimation
}