import { useEffect } from "react";
import commentsDB from "./commentsdata";
import datafiltlargo from "./datafiltlargo";
import EcgPanel from "./lib/components/ECGPanel";
import { mvScales, mmScales } from "./lib/scales";
import { useCallback, useMemo, useRef, useState } from "react";
import { getRightPixelsFromViewerToPlayer } from "./lib/components/comments/utils/date";

var blob = new Blob([JSON.stringify(datafiltlargo)], {
  type: "applicaton/json",
});

const duration = 3031;

const stages = {
  INITIAL: "INITIAL",
  PAUSED: "PAUSED",
  RECORDING: "RECORDING",
  PROCESSING: "PROCESSING",
};

const App = () => {
  const gainIdx = 2;
  const speedIdx = 2;

  const helpersRef = useRef();

  const [isPin, setIsPin] = useState(false);
  const [recordData, setRecordData] = useState();
  const [stage, setStage] = useState(stages.INITIAL);
  const [secondcheck, setSecondcheck] = useState(false);
  const [submitCheck, setSubmitCheck] = useState(false);
  const [durationplayer, setDurationplayer] = useState(0);
  const [continuesecondtocomments, setContinuesecondtocomments] =
    useState(false);

  const fullName = "Dr Ejemplo";

  const handleStartRecord = useCallback(
    (data) => {
      if (stage === stages.RECORDING) return;
      setStage(stages.RECORDING);
      helpersRef.current?.play(data);
    },
    [stage, helpersRef],
  );

  const handleAddComment = useCallback((lastComment) => {
    console.log("Handle add comment", lastComment);
  }, []);

  useEffect(() => {
    setRecordData({});

    const fetchData = async () => {
      const text = await blob.text();
      const data = JSON.parse(text);
      setRecordData(data);
      handleStartRecord(data);
    };

    fetchData();
  }, [handleStartRecord, setRecordData]);

  useEffect(() => {
    const { rightPixelsPlayer } = getRightPixelsFromViewerToPlayer(duration);
    setDurationplayer(rightPixelsPlayer);
  }, []);

  const renderComponent = useMemo(() => {
    return (
      <>
        {recordData && (
          <EcgPanel
            data={recordData}
            isPin={isPin}
            setIsPin={setIsPin}
            recordData={recordData}
            startRecord={handleStartRecord}
            stage={stage}
            debug={false}
            mvScale={mvScales[gainIdx]}
            msScale={mmScales[speedIdx]}
            helpersRef={helpersRef}
            reset={false}
            commentsDB={commentsDB}
            secondcheck={secondcheck}
            setSecondcheck={setSecondcheck}
            fullNameUser={fullName}
            submitCheck={submitCheck}
            setSubmitCheck={setSubmitCheck}
            continuesecondtocomments={continuesecondtocomments}
            setContinuesecondtocomments={setContinuesecondtocomments}
            addComment={handleAddComment}
            // lastMarginRightDB={16} // para datafiltcorto
            lastMarginRightDB={durationplayer}
            repository="frontDiagnostica"
            isOpenFromModal={false}
          />
        )}
      </>
    );
  }, [
    recordData,
    isPin,
    setIsPin,
    handleStartRecord,
    stage,
    gainIdx,
    helpersRef,
    secondcheck,
    setSecondcheck,
    fullName,
    submitCheck,
    setSubmitCheck,
    continuesecondtocomments,
    setContinuesecondtocomments,
    handleAddComment,
    durationplayer,
  ]);

  return renderComponent;
};
export default App;