import Ember from 'ember';
import * as d3s from 'd3-scale';

const speakerClassScale = d3s.scaleQuantize()
  .domain([0, 1])
  .range(['fa-volume-down', 'fa-volume-up']);


export default Ember.Component.extend({
  classNames: ['player-sound-control'],

  popcorn: null,

  volume: Ember.computed('popcorn', {
    get: function() {
      let popcorn = this.get('popcorn');
      if(!popcorn) {
        return 0;
      }
      return popcorn.volume();
    },
    set: function(key, value) {
      let popcorn = this.get('popcorn');
      if(!popcorn) {
        return 0;
      }
      const newValue = Math.min(1.0, Math.max(0, value));
      popcorn.volume(newValue);
      return newValue;
    }
  }),

  muted: Ember.computed('popcorn', {
    get: function() {
      let popcorn = this.get('popcorn');
      if(!popcorn) {
        return false;
      }
      return popcorn.muted();
    },
    set: function(key, value) {
      let popcorn = this.get('popcorn');
      if(!popcorn) {
        return false;
      }
      if(value) {
        popcorn.mute();
      } else {
        popcorn.unmute();
      }
      return value;
    }

  }),

  mutedObserver: Ember.observer('muted', function() {
    const rangeslider = this.$("#sound-control-range-slider");
    if(!rangeslider) {
      return;
    }
    rangeslider.rangeslider('update', true);
  }),

  volumeObserver: Ember.observer('volume', function() {
    const rangeslider = this.$("#sound-control-range-slider");
    const volume = this.get('volume');
    if(!rangeslider) {
      return;
    }
    rangeslider.val(volume).change();
  }),

  popcornObserver: Ember.observer('popcorn', function() {
    let popcorn = this.get('popcorn');
    if(!popcorn) {
      return;
    }
    popcorn.on('volumechange', () => {  this.notifyPropertyChange('volume'); this.notifyPropertyChange('muted'); });

  }),

  speakerClass: Ember.computed('volume', 'muted', function() {
    const volume = this.get('volume');
    const muted = this.get('muted');
    if(muted || volume === 0 ) {
      return "fa-volume-off";
    } else {
      return speakerClassScale(volume);
    }
  }),

  mouseEnter: function() {
    let baseOffset = this.$("#sound-control-speaker").offset();
    if(this.get('muted')) {
      return;
    }
    this.$("#sound-control-scale").show(400);
    this.$("#sound-control-scale").offset({ top: baseOffset.top + 55, left: baseOffset.left});
  },
  mouseLeave: function() {
    this.$("#sound-control-scale").hide(400);
  },

  didInsertElement: function() {
    const volume = this.get('volume');
    let rangeslider = this.$('#sound-control-range-slider');
    rangeslider.rangeslider({
      polyfill: false,
      onSlide: (pos, value) => {
        this.set('volume', value);
      },
      onSlideEnd: (pos, value) => {
        this.set('volume', value);
      },
      onInit: function() {
        Ember.$(this).value = volume;
      }
    });
  },

  willDestroyElement: function() {
    this.$('#sound-control-range-slider').rangeslider('destroy');
  },

  actions: {
    muteToggle() {
      if(!this.get('volume')) {
        return;
      }
      this.set('muted', !this.get('muted'));
    },
    clickMinus() {
      if(this.get('muted')) {
        return;
      }
      let volume = this.get('volume');
      this.set('volume', volume - 0.1);
    },
    clickPlus() {
      if(this.get('muted')) {
        return;
      }
      let volume = this.get('volume');
      this.set('volume', volume + 0.1);
    }
  }

});