import $ from 'jquery';
import 'jquery-ui/widgets/slider';

import Signal from '../../utils/signal';
import { state } from '../../state';
import { song } from '../../utils/songmanager';
import { player } from '../../audio/player';

import template from './templates/effects_editor.marko';

import styles from './styles.css';

export default class EffectsEditor {
  constructor(target) {
    this.target = target;
    this.lastCursor = state.cursor;
    this.track = undefined;

    Signal.connect(state, "cursorChanged", this, "onCursorChanged");
  }

  render() {
    const cur_track = state.cursor.get("track");
    const effects = [
      {
        name: "Overdrive",
      },
      {
        name: "Filter",
      },
      {
        name: "Cabinet",
      },
      {
        name: "Delay",
      },
      {
        name: "Reverb",
      },
      {
        name: "Compressor",
      },
      {
        name: "WahWah",
      },
      {
        name: "Tremolo",
      },
      {
        name: "Phaser",
      },
      {
        name: "Chorus",
      },
      {
        name: "Bitcrusher",
      },
      {
        name: "Moog Filter",
      },
      {
        name: "Ping Pong Delay",
      },
      {
        name: "Panner",
      },
      {
        name: "Gain",
      }
    ];

    try {
      this.track = song.song.tracks[cur_track];

      //if (this.track && 'effects' in this.track && this.track.effects.length > 0) {
        $(this.target).append(template.renderToString({track: this.track, effects}));
        let rateSlider = $("#rate-slider").slider({
          min: 0.01,
          max: 8,
          step: 0.01,
          value: 1.5,
          slide: (event, ui) => {
            $("#rate-value").val(ui.value);
          }
        });
        $("#rate-value").on("change", (e) => {
          rateSlider.slider("value", $(e.target).val());
        });
        let feedbackSlider = $("#feedback-slider").slider({
          min: 0,
          max: 1,
          step: 0.001,
          value: 0.2,
          slide: (event, ui) => {
            $("#feedback-value").val(ui.value);
          }
        });
        $("#feedback-value").on("change", (e) => {
          feedbackSlider.slider("value", $(e.target).val());
        });
        let delaySlider = $("#delay-slider").slider({
          min: 0,
          max: 1,
          step: 0.001,
          value: 0.0045,
          slide: (event, ui) => {
            $("#delay-value").val(ui.value);
          }
        });
        $("#delay-value").on("change", (e) => {
          delaySlider.slider("value", $(e.target).val());
        });
        $("#bypass").on("change", (e) => {
          player.chorus.bypass = !e.target.checked;
        });
      //}
    } catch(e) {
      console.log(e);
    }
  }

  refresh() {
    $(this.target).empty();
    this.render();
  }

  onCursorChanged() {
    if (state.cursor.get("track") !== this.lastCursor.get("track")) {
      this.target.empty();
      this.render();
      this.lastCursor = state.cursor;
    }
  }

  onSongChanged() {
    this.refresh();
  }
}

@@ -1287,24 +1287,26 @@
 try %7B%0A      
+//
 this.track =
@@ -1335,16 +1335,16 @@
 track%5D;%0A
-
 %0A      /
@@ -1477,16 +1477,18 @@
 String(%7B
+/*
 track: t
@@ -1497,16 +1497,18 @@
 s.track,
+*/
  effects
@@ -1646,11 +1646,32 @@
 ue: 
-1.5
+player.chorus.rate.value
 ,%0A  
@@ -1738,32 +1738,75 @@
 .val(ui.value);%0A
+            player.chorus.rate = ui.value;%0A
           %7D%0A    
@@ -1909,32 +1909,82 @@
 target).val());%0A
+          player.chorus.rate = $(e.target).val();%0A
         %7D);%0A    
@@ -2119,11 +2119,30 @@
 ue: 
-0.2
+player.chorus.feedback
 ,%0A  
@@ -2213,32 +2213,79 @@
 .val(ui.value);%0A
+            player.chorus.feedback = ui.value;%0A
           %7D%0A    
@@ -2396,32 +2396,86 @@
 target).val());%0A
+          player.chorus.feedback = $(e.target).val();%0A
         %7D);%0A    
@@ -2604,14 +2604,27 @@
 ue: 
-0.0045
+player.chorus.delay
 ,%0A  
@@ -2692,32 +2692,76 @@
 .val(ui.value);%0A
+            player.chorus.delay = ui.value;%0A
           %7D%0A    
@@ -2808,32 +2808,32 @@
 ange%22, (e) =%3E %7B%0A
-
           delayS
@@ -2866,32 +2866,83 @@
 target).val());%0A
+          player.chorus.delay = $(e.target).val();%0A
         %7D);%0A    

Fix to work with master changes.