/* global Tone Nexus */

function Sample(arg) {
  //ui
  this.div = document.getElementById(arg.ui);
  this.div.innerHTML += `
    <div style="">
      <div nexus-ui="button" id="${arg.ui}-playbutton" style="width:40px;height:40px"></div>
      <div class="label" style="width:80px;">${arg.label}</div>
    </div>
    <div style="display:none;">
      <div nexus-ui="dial" id="${arg.ui}-volume" style="width:80px;height:70px;margin-top:10px;"></div>
      <div class="label" style="width:80px;margin-top:10px;">볼륨</div>
      <div nexus-ui="number" id="${arg.ui}-volumenumber" style="width:60px;margin:10px;"></div>
    </div>
    <div style="display:none;">
      <div nexus-ui="dial" id="${arg.ui}-reverb" style="width:80px;height:70px;margin-top:10px;"></div>
      <div class="label" style="width:80px;margin-top:10px;">리버브</div>
      <div nexus-ui="number" id="${arg.ui}-reverbnumber" style="width:60px;margin:10px;"></div>
    </div>`;

  //label
  this.label = arg.label;

  //build the rack
  this.rack = new Nexus.Rack(arg.ui);
  this.rack.hide();
  //recollect components
  this.button = this.rack[arg.ui + '-playbutton'];
  this.volume = this.rack[arg.ui + '-volume'];
  this.volumenumber = this.rack[arg.ui + '-volumenumber'];
  this.reverb = this.rack[arg.ui + '-reverb'];
  this.reverbnumber = this.rack[arg.ui + '-reverbnumber'];

  //presets
  this.button.mode = "toggle";
  this.button.state = false;
  this.volume.min = -40;
  this.volume.max = 0;
  this.volume.value = -40;
  this.volume.interaction = "vertical"; // this doesn't work. TBD.. sth. is wrong!
  this.volumenumber.link(this.volume);
  this.reverb.min = 0;
  this.reverb.max = 1;
  this.reverb.value = 0;
  this.reverb.interaction = "vertical"; // this doesn't work. TBD.. sth. is wrong!
  this.reverbnumber.link(this.reverb);

  //colors
  // this.rack.colorize("accent","#00DCD8");
  // this.rack.colorize("fill","#2B5EA3");
  this.rack.colorize("accent","#DCD800");
  this.rack.colorize("fill","#333888");

  // states
  if (arg.type == 'loop') {
    this.loop = true;
    this.autostart = false;
  } else if (arg.type == 'oneshot') {
    this.loop = false;
    this.autostart = false;
  }

  // volume(gain) -> [Main output]
  this.vol = new Tone.Volume().toDestination();
  this.vol.mute = true;
  this.volume.on(
    "change",
    function (v) {
      this.vol.volume.value = v;
      if (v == -40) this.vol.mute = true;
      else this.vol.mute = false;
    }.bind(this)
  );

  // reverb(fx) -> volume(gain)
  this.rev = new Tone.Reverb().connect(this.vol);
  this.rev.wet.value = 0;
  this.reverb.on(
    "change",
    function (v) {
      this.rev.wet.value = v;
    }.bind(this)
  );

  // source -> reverb(fx)
  if (this.autostart) this.button.turnOn();
  this.player = new Tone.Player({
    url: arg.url,
    loop: this.loop,
    autostart: this.autostart,
    fadeIn: 3,
    fadeOut: 3,
    onstop: () => this.button.turnOff()
  }).connect(this.rev);
  this.player.buffer.onload = () => this.rack.show();
  this.button.on(
    "change",
    function (v) {
      if (v) this.player.start();
      else this.player.stop();
    }.bind(this)
  );

  // init
  this.volume.value = -10;
}

//samples
var samplers = [];
samplers.push(new Sample({ui: "sample0", label: "전시실 1", type: "oneshot", url: "/audio/전시실01.mp3"}));
samplers.push(new Sample({ui: "sample1", label: "앞마당", type: "loop", url: "/audio/앞마당01.mp3"}));
samplers.push(new Sample({ui: "sample2", label: "지나가는", type: "oneshot", url: "/audio/복도01.mp3"}));
samplers.push(new Sample({ui: "sample3", label: "대형 엘리베이터", type: "oneshot", url: "/audio/철수01.mp3"}));
samplers.push(new Sample({ui: "sample4", label: "작별 인사", type: "oneshot", url: "/audio/작별인사.mp3"}));
samplers.push(new Sample({ui: "sample5", label: "철수", type: "oneshot", url: "/audio/철수02.mp3"}));
samplers.push(new Sample({ui: "sample6", label: "전시실 3", type: "oneshot", url: "/audio/전시실03.mp3"}));
samplers.push(new Sample({ui: "sample7", label: "전시실 4", type: "oneshot", url: "/audio/전시실04 발걸음.mp3"}));
samplers.push(new Sample({ui: "sample8", label: "진동", type: "oneshot", url: "/audio/진동.mp3"}));
samplers.push(new Sample({ui: "sample9", label: "셔터", type: "oneshot", url: "/audio/셔터.mp3"}));
samplers.push(new Sample({ui: "sample10", label: "전시안내 딩동댕", type: "oneshot", url: "/audio/로비전시안내딩동댕.mp3"}));
samplers.push(new Sample({ui: "sample11", label: "전시실 공기", type: "loop", url: "/audio/전시실앰비언트.mp3"}));
samplers.push(new Sample({ui: "sample12", label: "전시실 2", type: "oneshot", url: "/audio/전시실02.mp3"}));
samplers.push(new Sample({ui: "sample13", label: "시끌벅적", type: "loop", url: "/audio/카페시끄러움.mp3"}));
samplers.push(new Sample({ui: "sample14", label: "카페", type: "loop", url: "/audio/카페.mp3"}));
samplers.push(new Sample({ui: "sample15", label: "로비", type: "loop", url: "/audio/로비01.mp3"}));
samplers.push(new Sample({ui: "sample16", label: "계단", type: "oneshot", url: "/audio/계단01.mp3"}));
samplers.push(new Sample({ui: "sample17", label: "사다리", type: "oneshot", url: "/audio/사다리.mp3"}));
samplers.push(new Sample({ui: "sample18", label: "도슨트 기다리는 관객들", type: "oneshot", url: "/audio/도슨트기다리는관객들.mp3"}));
samplers.push(new Sample({ui: "sample19", label: "도슨트 기둥", type: "oneshot", url: "/audio/도슨트_기둥이야기.mp3"}));
samplers.push(new Sample({ui: "sample20", label: "도슨트 문", type: "oneshot", url: "/audio/도슨트_서울시립미술관문갯수.mp3"}));
samplers.push(new Sample({ui: "sample21", label: "까마귀", type: "oneshot", url: "/audio/까마귀.mp3"}));
samplers.push(new Sample({ui: "sample22", label: "슬라이드 문", type: "oneshot", url: "/audio/정문_자동슬라이드문소리.mp3"}));

//presets
samplers[8].player.fadeIn = 0;
samplers[8].player.fadeOut = 0;
samplers[9].player.fadeIn = 0;
samplers[9].player.fadeOut = 0;

var radiobutton = new Nexus.RadioButton('#radio',{
  'size': [200,30],
  'numberOfButtons': 4,
  'active': -1
})
radiobutton.colorize("accent","#DCD800");
radiobutton.colorize("fill","#333888");

let highlight = "#880";
radiobutton.on(
  "change",
  function (v) {
    //clear & stop
    samplers.forEach((a) => {
      a.rack.colorize("fill", "#333888");
      a.button.turnOff();
      a.volume.value = -10;
      a.reverb.value = 0;
    });
    switch (v) {
    case 0:
      //scene #1 : 앞마당
      document.getElementById('radio-label').textContent = '앞마당';
      samplers[1].rack.colorize("fill", highlight);
      samplers[4].rack.colorize("fill", highlight);
      samplers[21].rack.colorize("fill", highlight); //까마귀
      samplers[1].button.turnOn();
      break;
    case 1:
      //scene #2 : 로비
      document.getElementById('radio-label').textContent = '로비';
      samplers[15].rack.colorize("fill", highlight);
      samplers[16].rack.colorize("fill", highlight);
      samplers[10].rack.colorize("fill", highlight);
      samplers[22].rack.colorize("fill", highlight); //슬라이드문
      samplers[18].rack.colorize("fill", highlight); //도슨트기다리는관객들
      samplers[19].rack.colorize("fill", highlight); //도슨트_기둥
      samplers[2].rack.colorize("fill", highlight);
      samplers[3].rack.colorize("fill", highlight);
      samplers[15].button.turnOn();
      break;
    case 2:
      //scene #3 : 전시실
      document.getElementById('radio-label').textContent = '전시실';
      samplers[11].rack.colorize("fill", highlight);
      samplers[7].rack.colorize("fill", highlight);
      samplers[0].rack.colorize("fill", highlight);
      samplers[12].rack.colorize("fill", highlight);
      samplers[6].rack.colorize("fill", highlight);
      samplers[20].rack.colorize("fill", highlight); //도슨트_문
      samplers[9].rack.colorize("fill", highlight);
      samplers[8].rack.colorize("fill", highlight);
      samplers[5].rack.colorize("fill", highlight);
      samplers[17].rack.colorize("fill", highlight);
      samplers[11].button.turnOn();
      break;
    case 3:
      //scene #4 : 카페
      document.getElementById('radio-label').textContent = '카페';
      samplers[14].rack.colorize("fill", highlight);
      samplers[13].rack.colorize("fill", highlight);
      samplers[10].rack.colorize("fill", highlight);
      samplers[10].volume.value = 0;
      samplers[10].reverb.value = 0.7;
      samplers[14].button.turnOn();
      break;
    default:
      ;
    }
  }
);

Tone.loaded().then(() => {
  //
  radiobutton.select(0);
  //
});

// TBD: randomized walker event generator.

// var looper;
// var timer;
// var task = () => {
//   console.log("hi");
// };
// (looper = function(timeout) {
//   timer = setTimeout(() => {

//     //do sth.
//     task();

//     //random scheduling
//     var timegap = 1000 + Math.random()*(3000);
//     looper(timegap);

//   }, timeout);
// })(1000);

// cancelTimeout(timer);
