/**
 * Relabi generator UI
 * @module src/ui/App.js;
 */

import * as React from "react";
import { useState, useEffect } from "react";
import Relabi from "../relabi";
import { Kalimba, Drums } from "../lib/instruments";

export default function App() {
  const [relabi, setRelabi] = useState();

  /**
   * Instantiate the Relabi generator
   */
  useEffect(() => {
    if (!relabi) {
      const relabiGenerator = new Relabi({
        waves: [
          { type: "sine", frequency: 0.75 },
          { type: "sine", frequency: 1.0 },
          { type: "sine", frequency: 1.617 },
          { type: "sine", frequency: 3.141 },
        ],
        bounds: [
          {
            level: -0.75,
            color: "#f00",
            sounds: [
              { instrument: Drums, index: 0 },
              { instrument: Drums, index: 1 },
            ],
          },
          {
            level: 0.75,
            color: "#f00",
            sounds: [
              { instrument: Drums, index: 2 },
              { instrument: Drums, index: 3 },
            ],
          },
          {
            level: -0.25,
            color: "#00f",
            sounds: [
              { instrument: Kalimba, frequency: 440 },
              { instrument: Kalimba, frequency: (440 * 3) / 2 },
            ],
          },
          {
            level: 0.25,
            color: "#00f",
            sounds: [
              { instrument: Kalimba, frequency: (440 * 6) / 5 },
              { instrument: Kalimba, frequency: (440 * 6) / 7 },
            ],
          },
        ],
      });
      relabiGenerator.start();
      setRelabi(relabiGenerator);
    }
  }, [relabi]);

  /**
   * Render
   */

  return <div>Relabi generator</div>;
}