const MeterInputs = ({ input, inputMeter }) => {
  writeSignalLevel(input, inputMeter, 3);
}

const Visualizer = (ctx, settings, { clock, playing }) => {
  ctx.fillStyle = gray100;
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  const inputLevel = (settings.inputMeter[0]);
  if (playing) {
    const beatProgress = clock % 1;
    if (beatProgress < 0.5) {
      ctx.fillStyle = `rgba(255,255,255,${settings.brightness + (0.5 - beatProgress)})`;
    } else {
      ctx.fillStyle = `rgba(255,255,255,${settings.brightness})`;
    }
  } else {
    ctx.fillStyle = `rgba(255,255,255,${settings.brightness})`;
  }

  ctx.beginPath();
  ctx.arc(ctx.canvas.width/2, ctx.canvas.height/2, inputLevel * ctx.canvas.width/4, 0, 2 * Math.PI);
  ctx.fill();
};

this.constructDevice = () => constructPerBufferDevice({
  implementation: MeterInputs,
  inputs: {
    input: stereo('In'),
    brightness: expose(zeroOneSetting('Brightness', .5))
  },
  sharedArrays: {
    inputMeter: 1
  },
  layout: row([
    titled.knob('brightness'),
    pinnable(canvas(
      'main',
      Visualizer,
      200,
      200
    ))
  ])
});
