import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['player-component'],
    classNameBindings: ['video:video', 'reduce:reduce'],
    videoBinding: 'player.model.video',
    reduceBinding: 'player.reduce',

    player: Ember.inject.service(),
    popcorn: null,

    head: 0,
    remaining: 0,

    isFirst: false,
    isLast: false,

    item: Ember.computed('player.model', function() {
        return this.get('player').get('model');
    }),

    modelLoaded: Ember.observer('player.model', function() {
        var items = this.get('player').get('items');
        var index = items.indexOf(this.get('player').get('item'));
        this.set('isFirst', index === 0);
        this.set('isLast', index === items.length - 1);
        if(this.get('player').get('playing')) {
            this.play();
        }
    }),

    itemLoaded: Ember.observer('player.model.media', function() {
        this.get('popcorn').load();
    }),

    progressObserver: Ember.observer('player.progress', function() {
        this.get('popcorn').currentTime(this.get('player').get('progress') / 1000);
    }),

    init: function() {
        this._super(...arguments);
        this.get('player');
    },

    didInsertElement: function() {
        this.set('popcorn', Popcorn('#popcorn-audio'));
        this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('onUpdate')));
        this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onUpdate')));
        this.get('popcorn').on('play', Ember.run.bind(this, this.get('onPlay')));
        this.get('popcorn').on('pause', Ember.run.bind(this, this.get('onPause')));

        this.get('player').on('reset', Ember.run.bind(this, function(id) {
            if(this.get('player').get('item') !== id) {
                this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('play')));
            } else {
                this.send('toggle');
            }
        }));
    },

    onUpdate: function() {
        var progress = this.get('popcorn').currentTime();
        var duration = this.get('popcorn').duration();
        this.$('.bar .value').width(progress * 100 / duration + '%');
        this.get('player').set('progress', progress * 1000);
        this.set('head', progress);
        this.set('remaining', duration - progress);
    },

    onPlay: function() {
        this.get('player').set('playing', true);
    },

    onPause: function() {
        this.get('player').set('playing', false);
    },

    play: function() {
        this.get('popcorn').play();
    },

    pause: function() {
        this.get('popcorn').pause();
    },

    actions: {

        toggle: function() {
            if(this.get('player').get('playing')) {
                this.pause();
            } else {
                this.play();
            } 
        },

        backward: function() {
            var index = this.get('player').get('items').indexOf(this.get('player').get('item'));
            var item = this.get('player').get('items')[index - 1];
            this.get('player').set('item', item);
        },

        forward: function() {
            var index = this.get('player').get('items').indexOf(this.get('player').get('item'));
            var item = this.get('player').get('items')[index + 1];
            this.get('player').set('item', item);
        },

        setTime: function(event) {
            this.get('popcorn').currentTime(event.layerX * this.get('popcorn').duration() / Ember.$(event.target).width());
        }

    }
});