import React, { useRef } from 'react';
import { useEffect, useState } from 'react';
import styled from 'styled-components';

import { useDrawDerivations } from "../hooks/useDrawDerivations";

import ECG from './ECG';
import EcgNavigator from './EcgNavigator';


const ECGWrapper = styled.div`
  display: flex;
  justify-content: center;
  /* margin-top: 213px; */
`


const ECGContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  max-width: 1260px;
`


const EcgPanel = ({
  datasetRef,
  mvScale,
  msScale,
  startAcq,
  pauseAcq,
  dataBufferSize,
  helpersRef,
  width = 600,
  height = 100,
  debug = false
}) => {
  const [packetSize, setPacketSize] = useState(5);
  const [msInterval, setMsInterval] = useState();

  useEffect(() => {
    if (packetSize) {
      const sampleFrequencyHz = 300; // 
      const sampleDistanceMs = 1000 / sampleFrequencyHz;
      setMsInterval((packetSize * sampleDistanceMs).toFixed(2))
    }
  }, [packetSize])

  const [live, setLive] = useState(true);
  const [lastDrawn, setLastDrawn] = useState(0);

  const {
    play,
    stop,
    next,
    drawViewportFragment
  } = useDrawDerivations(
    datasetRef,
    {
      color: "#B163FF",
      mvScale,
      msScale
    },
    setLastDrawn,
  );

  useEffect(() => {
    if (!helpersRef) return;
    helpersRef.current = {
      play,
      stop,
      next,
    }
    console.log(`Helpers initialized`)
  }, [])

  

  const derivations = [
    { derivation: "di", label: "I" },
    { derivation: "v1" },
    { derivation: "dii", label: "II" },
    { derivation: "v2" },
    { derivation: "diii", label: "III" },
    { derivation: "v3" },
    { derivation: "aVR" },
    { derivation: "v4" },
    { derivation: "aVL" },
    { derivation: "v5" },
    { derivation: "aVF" },
    { derivation: "v6" }
  ]

  return (
    <>

      {debug && (
        <div style={{ display: "flex", flexDirection: 'column' }}>
          <div style={{ display: "flex" }}>
            <input
              type="number"
              placeholder='packet size'
              style={{ width: "50px" }}
              value={packetSize}
              onChange={ev => {
                setPacketSize(parseInt(ev.target.value))
              }}
            />
            <input
              type="text"
              placeholder='msInterval'
              style={{ width: "50px" }}
              value={msInterval}
            />
            <button style={{ alignSelf: "flex-start" }} onClick={() => startAcq(packetSize)}>startAcq</button>
            <button style={{ alignSelf: "flex-start" }} onClick={pauseAcq}>pauseAcq</button>

            <div style={{ margin: "0px 10px" }}>{lastDrawn} / {dataBufferSize}</div>
            <div style={{ margin: "0px 10px" }}>Diff: {dataBufferSize - lastDrawn}</div>
          </div>
          <div style={{ display: "flex" }}>
            <button style={{ alignSelf: "flex-start" }} onClick={play}>play</button>
            <button style={{ alignSelf: "flex-start" }} onClick={next}>next</button>
            <button style={{ alignSelf: "flex-start" }} onClick={stop}>stop</button>
          </div>
          <button style={{ alignSelf: "flex-start" }} onClick={() => setLive(l => !l)}>toggle live</button>


          {live && `LIVE`}
          {!live && `REVIEW`}
        </div>

      )}

      <ECGWrapper>
        <ECGContainer className="ecg-container">
          {derivations.map(d => (
            <ECG
              key={d.derivation}
              derivation={d.derivation}
              label={d?.label}
              height={height}
              width={width}
            />
          ))}

          <EcgNavigator
            height={height}
            width={1255}
            live={live}
            lastDrawn={lastDrawn}
            msScale={msScale}
            onViewportChange={(e) => drawViewportFragment(e.left, e.right)}
          />

        </ECGContainer>
      </ECGWrapper>
    </>
  )
}
export default EcgPanel;