// -----------
// ----------- StateManager
// -----------

function StateManager(args){
    this._state = null;
    this.states = args.states || [];
    this.node   = args.node || null;
}

StateManager.prototype = {
    setNodeState: function(){
        this.node.classList.remove.apply(this.node.classList, this.states);
        this.node.classList.add(this.state);
    },
    get state(){
        return this._state || this.states[0];
    },
    set state(_state){
        if(this.states.indexOf(_state) === -1){
            throw new Error('Not a valid state', _state);
        } else if(this._state !== _state){
            this._state = _state;
            this.setNodeState();
        }
    }
};


// -----------
// ----------- Machine
// -----------

function Machine(args){
    this.node   = args.node;
    this.states = args.states;
}

Machine.prototype = Object.create(StateManager.prototype);

const MACHINE = new Machine({
    node: document.getElementById('caffeine-machine'),
    states: [
        'inactive',
        'processing',
        'error',
        'success'
    ]
});

// -----------
// ----------- Lever
// -----------

function Lever(args){
    this.node   = args.node;
    this.states = args.states;
}

Lever.prototype = Object.create(StateManager.prototype);

// --- Events
Lever.prototype.onLeverPull = function(){
    this.node.classList.add('animate');
    this.state = 'disabled';
};

Lever.prototype.onAnimationIteration = function(){
    if(!this.node.classList.contains('reverse')){
        this.node.classList.add('reverse');
        SLOTS.spin();
    } 
}

Lever.prototype.onAnimationEnd = function(){
    if(this.node.classList.contains('reverse')){
        this.node.classList.remove('animate', 'reverse');
        this.state = 'enabled'; 
    }
}

// --- Initializer
Lever.prototype.init = function(){
    const onLeverPull          = this.onLeverPull.bind(this);
    const onAnimationIteration = this.onAnimationIteration.bind(this);
    const onAnimationEnd       = this.onAnimationEnd.bind(this);

    this.node.addEventListener('click', onLeverPull);
    this.node.addEventListener('animationiteration', onAnimationIteration);
    this.node.addEventListener('animationend', onAnimationEnd);

    this.setNodeState();
};

const LEVER = new Lever({
    node: document.querySelector('.lever'),
    states: [
        'enabled',
        'disabled'
    ]
});

LEVER.init();

// -----------
// ----------- Slot
// -----------

function Slot(args){
    this.icons = args.icons;
    this.parentNode = SLOTS_NODE;
    this.states = [
        'inactive',
        'spinning'
    ];
    this.timePerRotation = args.timePerRotation || 100;
    this.spinDuration = args.spinDuration || 2000;
    this.animationTimestamp = null;
    this.winner = null;
    this.parent = null;
}

Slot.prototype = Object.create(StateManager.prototype);

Slot.prototype.pickWinner = function(){
    this.winner = Math.floor(Math.random() * this.icons.length);   
}

Slot.prototype.onAnimationEnd = function(){
    const y = this.winner * (100 / this.icons.length);
    this.node.firstElementChild.style.transform = 'translateY(-' + y + '%)';
    
    this.parent.generator.next(this.winner);
    this.state = 'inactive';
}

Slot.prototype._animate = function(timestamp){
    timestamp = timestamp || performance.now();
    if(!this.animationTimestamp){ this.animationTimestamp = timestamp; }
    
    const progress = timestamp - this.animationTimestamp;
    const y = Math.min(100, (progress % this.timePerRotation));
        
    this.node.firstElementChild.style.transform = 'translateY(-' + y + '%)';

    if(progress < this.spinDuration){
        window.requestAnimationFrame(this.animate);   
    } else {
        this.onAnimationEnd();
    }
}
    
Slot.prototype.spin = function(){
    this.reset();
    this.animate();
    this.state = 'spinning';   
}

Slot.prototype.reset = function(){
    this.animationTimestamp = null;
    this.pickWinner();
}

Slot.prototype.init = function(parent){
    this.animate = this._animate.bind(this);
    this.parent = parent;
    this.render();
}

Slot.prototype.render = function(){
    const slots = this.parentNode;

    const slot     = document.createElement('div');
    slot.className = 'slot';

    const column     = document.createElement('div');
    column.className = 'column';

    this.icons.forEach((icon)=>{
        let tag = document.createElement('i'); 
        tag.className = icon;
        column.appendChild(tag);
    });

    slot.appendChild(column);
    slots.appendChild(slot);

    this.node = slot;
}



// -----------
// ----------- Slots
// -----------

const SLOTS_NODE = document.querySelector('.slots');

function Slots(args){
    this.node   = args.node;
    this.states = args.states;
    this.slots  = args.slots;
    this.generator = null;
}

Slots.prototype = Object.create(StateManager.prototype);

Slots.prototype.beforeSpin = function(){    
    function* slotsFinished(){
        const a = yield;
        const b = yield;
        const c = yield;
        this.afterSpin([a, b, c]);
    };

    this.generator = slotsFinished.call(this);
    this.generator.next();
}

Slots.prototype.spin = function(){
    if(SLOTS.state !== 'spinning' && CUP.state !== 'pouring' && LIQUID.state !== 'pouring'){
        MACHINE.state = 'processing';
        this.state = 'spinning';
        this.beforeSpin();
        this.slots.forEach(slot => slot.spin() );
    }
}

Slots.prototype.afterSpin = function(values){
    const first = values[0];
    const slotsMatch = values.every((v)=> v === first); 
    
    if(slotsMatch){
        CUP.setTitle(this.getWinner(first));

        MACHINE.state = 'success';
        LIQUID.state = 'pouring';
        CUP.state = 'pouring';
    } else {
        MACHINE.state = 'error';
    }
    
    this.state = 'inactive';
}

Slots.prototype.getWinner = function(index){
    switch(index){
        case 0:
            return 'Coffee';
        case 1:
            return 'Espresso';
        case 2:
            return 'Tea';
        default: 
            throw Error('Not a valid winner');
            break;
    }        
}

Slots.prototype.render = function(){
    this.slots.forEach( slot => slot.init(this) );
}

Slots.prototype.init = function(){
    this.render();
}

const SLOTS = new Slots({
    node: SLOTS_NODE,
    states: [
        'inactive',
        'spinning'
    ],
    slots: [
        new Slot({
            icons: [
                'icon-coffee-pot',
                'icon-espresso-machine',
                'icon-tea-pot'
            ],
            spinDuration: 1500
        }), 
        new Slot({
            icons: [
                'icon-coffee-filter',
                'icon-espresso-tamper',
                'icon-tea-strainer'
            ],
            spinDuration: 2000
        }), 
        new Slot({
            icons: [
                'icon-coffee-beans',
                'icon-espresso-grounds',
                'icon-tea-leaf'
            ],
            spinDuration: 2500
        }),
    ]
});

SLOTS.init();

// -----------
// ----------- Liquid
// -----------

function Liquid(args){
    this.node   = args.node;
    this.states = args.states;
}

Liquid.prototype = Object.create(StateManager.prototype);

Liquid.prototype.onAnimationEnd = function(){
    this.state = 'inactive'; 
}

Liquid.prototype.init = function(){
    const onAnimationEnd = this.onAnimationEnd.bind(this);
    this.node.addEventListener('animationend', onAnimationEnd);
    this.setNodeState();
}

const LIQUID = new Liquid({
    node: document.getElementById('liquid'),
    states: [
        'inactive',
        'pouring',
    ]
});

LIQUID.init();

// -----------
// ----------- Cup
// -----------

function Cup(args){
    this.node   = args.node;
    this.states = args.states;
    this.cupName = document.getElementById('cup-name');
}

Cup.prototype = Object.create(StateManager.prototype);

Cup.prototype.onAnimationEnd = function(){
    this.state = 'inactive'; 
}

Cup.prototype.init = function(){
    const onAnimationEnd = this.onAnimationEnd.bind(this);
    this.node.addEventListener('animationend', onAnimationEnd);
    this.setNodeState();
}

Cup.prototype.setTitle = function(title){
    this.cupName.textContent = title;
}

const CUP = new Cup({
    node: document.getElementById('cup'),
    states: [
        'inactive',
        'pouring',
    ]
});

CUP.init();