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

import * as React from "react";
import { useState, useEffect, useRef } from "react";
import Relabi from "../relabi";
import Controls from "./Controls.jsx";

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

  /**
   * Instantiate the Relabi generator
   */
  useEffect(() => {
    if (!relabi) {
      const relabiGenerator = new Relabi({
        settings: {
          speed: 1.0,
          chaos: 0.2,
        },
        waves: [
          { shape: "sine", frequency: 0.5, weight: 1 },
          { shape: "sine", frequency: 1.0, weight: 1 },
          { shape: "sine", frequency: 1.5, weight: 1 },
          { shape: "sine", frequency: 2.0, weight: 1 },
        ],
        bounds: [
          {
            level: -0.25,
            color: "#f33",
            sounds: [{ instrument: "Kick" }, { instrument: "Snare" }],
          },
          {
            level: 0.25,
            color: "#f83",
            sounds: [{ instrument: "Hat" }, { instrument: "Perc" }],
          },
          // {
          //   level: -0.25,
          //   color: "#3b8",
          //   sounds: [
          //     { instrument: Kalimba, frequency: 440 },
          //     { instrument: Kalimba, frequency: (440 * 3) / 2 },
          //   ],
          // },
          // {
          //   level: 0.25,
          //   color: "#36f",
          //   sounds: [
          //     { instrument: Kalimba, frequency: (440 * 6) / 5 },
          //     { instrument: Kalimba, frequency: (440 * 6) / 7 },
          //   ],
          // },
        ],
      });
      relabiGenerator.start();
      setRelabi(relabiGenerator);
    }
  }, [relabi]);

  useEffect(() => {
    if (relabi && relabiRef.current) {
      relabi.canvas.appendCanvas(relabiRef.current);
    }
  }, [relabi, relabiRef.current]);

  /**
   * Render
   */
  return (
    <div
      style={{
        height: "100%",
        width: "100%",
        padding: 0,
        margin: 0,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
      }}
    >
      <div ref={relabiRef} />
      <Controls relabi={relabi} />
    </div>
  );
}