import Ember from 'ember';

export default Ember.Component.extend({

    filter: Ember.inject.service(),

    dateObserver: Ember.observer('filter.date', function() {

        var self = this;

        this.$('li').removeClass('highlighted');

        this.get('filter.date').forEach(function(date) {

            self.$('li#' + date).addClass('highlighted');

        });

    }),

    elementId: "chrono-table",

    didInsertElement: function(){

        var self = this;

        if (this.get('filter').get('date') !== null){

            this.highlightQuery(this.get('filter').get('date'));

        }

        var isMouseDown = false,

            isHighlighted;

        Ember.$("#chrono-table li").mousedown(function () {

            isMouseDown = true;

            var dates = self.get('filter').get('date').toArray();

            var index = dates.indexOf(parseInt(Ember.$(this).attr('id')));

            if(index === -1) {

                dates.push(parseInt(Ember.$(this).attr('id')));

                isHighlighted = true;

            } else {

                dates.splice(index, 1);

                isHighlighted = false;

            }

            self.get('filter').set('date', dates);

            return false; // prevent text selection

        }).mouseover(function () {

            if (isMouseDown) {

                if(Ember.$(this).hasClass("highlighted") !== isHighlighted) {

                    var dates = self.get('filter').get('date').toArray();

                    var index = dates.indexOf(parseInt(Ember.$(this).attr('id')));

                    if(index === -1) {

                        dates.push(parseInt(Ember.$(this).attr('id')));

                    } else {

                        dates.splice(index, 1);

                    }

                    self.get('filter').set('date', dates);

                }

            }

        }).bind("selectstart", function () {

            return false;

        });

        Ember.$(document).mouseup(function () {

            isMouseDown = false;

        });

    },

    highlightQuery: function(dates){

        dates.map(function(date){

            Ember.$("#" + date).toggleClass("highlighted", true);

        });

    }

});