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;
    }

  }),

  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() {
    this.set('volumeSliderHandler', this.$(".volume-slider").on("input change", (event) => { this.set('volume',Ember.$(event.target).val()); }));
  },

  willDestroyElement: function() {
    let volumeSliderHandler = this.get('volumeSliderHandler');
    if(volumeSliderHandler) {
      this.$(".volume-slider").off({"input change": volumeSliderHandler});
    }
  },

  actions: {
    muteToggle() {
      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);
    }
  }

});