import React, {useEffect, useState} from 'react';
  import { EVENT_NAMES } from "../../enums/enums"
import "./style.scss"

// value: undefined,
// name: undefined,
// mode: undefined,
// pid: pid,
// min: undefined,
// max: undefined,
// unit: undefined,
// topic: undefined,

const RpmStable = (props) => {
    const [rpm, setRpm] = useState({value: 0, max: 10000});
    //const [rpmMax, setRpmMax] = useState(10000);
    const steps = [0];

    for (let index = 1; index <= (rpm.max / 1000); index++) {
      steps.push(<div key={index}>{index}</div>)
    }

    useEffect(
        () => {
          window.electron.receive(EVENT_NAMES.TELEMETRY_RPM, (rpm) => {
            setRpm(rpm)
          })
          return () => {
          };
        },[]
      );
    return (
        <div className="rpm-stable"> 
            <div className="rpm-stable__container">
                <div style={{width: `${rpm.value/rpm.max * 100}%`}} className="rpm-stable__rpm"></div>
                <div className="rpm-stable__steps">{steps}</div>
            </div>
            
        </div>
    );
}

export default RpmStable;