/* eslint-disable no-unused-vars */
import React, { useState, useEffect, useRef } from "react";
import CenterGrowSlider from "./CenterGrowSlider.js";
import AutoTuneDataReceiver from "../DataRecievers/AutoTuneDataReceiver.js";
// import { Slider } from "@mui/material";
// import { styled } from "@mui/material/styles";

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

export default function AutoTuneInfo() {
  const [inputCents, setInputCents] = useState(0);
  const [outputCents, setOutputCents] = useState(0);
  const [autotuneNote, setAutotuneNote] = useState(0);
  const dataReceiverRef = useRef(null);
  const isActiveRef = useRef(true);

  function getCharfromNoteIndex(index) {
    if (index === -1) return "-";
    const NOTE_NAMES = [
      "C",
      "C♯",
      "D",
      "D♯",
      "E",
      "F",
      "F♯",
      "G",
      "G♯",
      "A",
      "A♯",
      "B",
    ];
    if (typeof index !== "number" || isNaN(index)) return "";
    return NOTE_NAMES[index % NOTE_NAMES.length];
  }

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

    function render() {
      if (!isActiveRef.current) return;
      if (dataReceiverRef.current) {
        setInputCents(dataReceiverRef.current.getInputCents());
        setOutputCents(dataReceiverRef.current.getOutputCents());
        setAutotuneNote(dataReceiverRef.current.getAutotuneNote());
      }
      window.requestAnimationFrame(render);
    }

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

  return (
    <div className="flex">
      <h1
        className="w-8 flex-initial py-2 px-1 text-xl"
        style={{ color: "#666" }}
      >
        {getCharfromNoteIndex(autotuneNote)}
      </h1>
      <div className=" py-2 px-1 flex-1">
        <div className="py-1">
          <CenterGrowSlider value={inputCents} />
        </div>
        <div className="py-1">
          <CenterGrowSlider value={outputCents} />
        </div>
      </div>
    </div>
  );
}
