import React, { useState, useEffect, useRef } from "react";
import PianoKeyboard from "./PianoKeyboard";
import MidNoteDataReceiver from "../DataRecievers/MidiNoteDataReceiver.js";
// import { Slider } from "@mui/material";
// import { styled } from "@mui/material/styles";

// eslint-disable-next-line react/prop-types

export default function MidiNoteInfo() {
  const [notes, setNotes] = useState([]);
  const dataReceiverRef = useRef(null);
  const isActiveRef = useRef(true);

  useEffect(() => {
    dataReceiverRef.current = new MidNoteDataReceiver();
    isActiveRef.current = true;

    function render() {
      if (!isActiveRef.current) return;
      if (dataReceiverRef.current) {
        setNotes(dataReceiverRef.current.getNotes());
      }
      window.requestAnimationFrame(render);
    }

    window.requestAnimationFrame(render);
    return function cleanup() {
      isActiveRef.current = false;
      if (dataReceiverRef.current) dataReceiverRef.current.unregister();
    };
  }, []);

  return (
    <div className="rounded-lg h-[80px]" style={{ marginTop: "1rem" }}>
      <PianoKeyboard heldNotes={notes} LOWEST_MIDI={24} HIGHEST_MIDI={84} />
    </div>
  );
}