/* global Tone Nexus */

function Sample(arg) {
  //ui
  this.div = document.getElementById(arg.ui);
  this.div.innerHTML += `
    <div style="float:left">
      <div nexus-ui="button" id="${arg.ui}-playbutton" style="width:80px;height:70px;margin-top:10px;"></div>
      <div class="label" style="width:80px;margin-top:10px;">${arg.label}</div>
    </div>
    <div style="float:left">
      <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="float:left">
      <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>
`;
  
  //build the rack
  this.rack = new Nexus.Rack(arg.ui);
  //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 = -20;
  this.volume.max = 0;
  this.volume.value = -20;
  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");

  // states
  if (arg.type == 'loop') {
    this.loop = true;
    this.autostart = true;
  } 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 == -20) 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 (arg.autostart) this.button.turnOn();
  this.player = new Tone.Player({
    url: arg.url,
    loop: arg.loop,
    autostart: arg.autostart,
    fadeIn: 5,
    fadeOut: 5,
  }).connect(this.rev);
  this.button.on(
    "change",
    function (v) {
      if (v) this.player.start();
      else this.player.stop();
    }.bind(this)
  );
  if (arg.type == "oneshot") {
    this.player.onstop = () => this.button.turnOff()
  }
}

//script

var samplers = [];

//index - 0
samplers.push(new Sample({
  label: "1층 로비",
  ui: "ambience-lobby",
  type: 'loop',
  url: "https://cdn.glitch.com/d050ca58-b6d2-4626-bc1e-2bf21f831cec%2F1%20mercury%20per.mp3?v=1629789592780",
}));

//index - 1
samplers.push(new Sample({
  label: "1층 전시실",
  ui: "ambience-exhibit-hall1",
  type: 'oneshot',
  url: "https://cdn.glitch.com/d050ca58-b6d2-4626-bc1e-2bf21f831cec%2F4%20jupiter%20arp.mp3?v=1629789594247",
}));

//live scripts
samplers[0].volume.value = -10;
samplers[1].volume.value = -10;