<div id="start">
  <p>Enter generated access key here</p>
  <div>
    <input id="access_key" type="text" placeholder="Access Key" required />
    <button onclick="producer.start()">Start</button>
  </div>
</div>
<div id="waiting" class="hidden">Waiting for connection...</div>
<div id="producer" width="100%" class="hidden flex">
  <div style="flex: 1;">
    <h3>Sine Wave Generator</h3>
    <button id="pause" onclick="producer.pause()" style="display: block; width: 70px; padding: 10px;">
      Pause
    </button>
    <button id="play" onclick="producer.play()" style="display: block; width: 70px; padding: 10px;" disabled>
      Play
    </button>
  </div>
  <div style="flex: 1;">
    <textarea id="stream" style="width: 100%; height: 124px"></textarea>
    </di>
  </div>

@import url("https://fonts.googleapis.com/css?family=Rubik:400,700");

body {
  font-family: Rubik, sans-serif;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

class Producer {
  constructor() {
    this.ws = null;
    this.sineWaveIntervalId = null;
    this.sineWaveXValue = 0;
  }

  produce(x, y) {
    this.ws.send(JSON.stringify({ x, y }));

    const textarea = document.querySelector("#stream");
    textarea.value += `${x}, ${y}\n`;
    textarea.scrollTop = textarea.scrollHeight;
  }

  startSineWave() {
    this.sineWaveIntervalId = setInterval(() => {
      this.produce(this.sineWaveXValue, Math.sin(this.sineWaveXValue));
      this.sineWaveXValue += 0.1;
    }, 400);
  }

  stopSineWave() {
    clearInterval(this.sineWaveIntervalId);
  }

  pause() {
    this.stopSineWave();
    document.querySelector("#play").disabled = false;
    document.querySelector("#pause").disabled = true;
  }

  play() {
    this.startSineWave();
    document.querySelector("#play").disabled = true;
    document.querySelector("#pause").disabled = false;
  }

  start() {
    document.querySelector("#start").classList.add("hidden");
    document.querySelector("#waiting").classList.remove("hidden");

    const access_key = document.querySelector("#access_key").value;

    // Connect to WebSocket
    this.ws = new WebSocket(
      `wss://infinyon.cloud/wsr/v1/simple/produce?access_key=${access_key}`
    );

    this.ws.onopen = () => {
      document.querySelector("#waiting").classList.add("hidden");
      document.querySelector("#producer").classList.remove("hidden");
      this.startSineWave();
    };
  }
}

window.producer = new Producer();