import React, {useEffect, useState} from 'react';
import { EVENT_NAMES } from "./../../enums/enums"
import "./style.scss"
const GearsDigital = (props) => {
    const [gear, setGear] = useState(0);

    useEffect(
        () => {
          window.electron.receive(EVENT_NAMES.TELEMETRY_GEAR, (data) => {
            setGear(data)
          })
          return () => {
          };
        },[]
    );

    return (
        <div className="gears-digital">
            <div className="gears-digital__gears-container">
                <div className={`gears-digital__gear ${gear.current === 0 ? "gears-digital__gear--active" : ""}`}>R</div>
                <div className={`gears-digital__gear ${gear.current === 1 ? "gears-digital__gear--active" : ""}`}>1</div>
                <div className={`gears-digital__gear ${gear.current === 2 ? "gears-digital__gear--active" : ""}`}>2</div>
                <div className={`gears-digital__gear ${gear.current === 3 ? "gears-digital__gear--active" : ""}`}>3</div>
                <div className={`gears-digital__gear ${gear.current === 4 ? "gears-digital__gear--active" : ""}`}>4</div>
                <div className={`gears-digital__gear ${gear.current === 5 ? "gears-digital__gear--active" : ""}`}>5</div>
            </div>
            
        </div>
    );
}

export default GearsDigital;