import React, { useState ,useEffect} from "react";
import Axios from "axios";

const DevStatus = (props) => {
console.log(props.status.deviceStatus )
  const [startDevBtn, setStartDevBt] = useState(props.status.deviceStatus === "off" ? true : false);

  useEffect(() => {
    console.log("CHANGEED");
    setStartDevBt(props.status.deviceStatus === "off" ? true : false);
  }, [props.status]);

  const onStartDev = () => {
    Axios({
      method: "GET",
      withCredentials: true,
      url: process.env.REACT_APP_BACKEND_URL + "/Device/start",
    }).then(async (res) => {
      console.log("********************");
      // update dataset name

    });
    setStartDevBt(false);
  };




  return (
    <React.Fragment>
      <div className=" row  m-1 ">
        <div className="col-12 px-1  my-1">
          <button
            disabled={!startDevBtn}
            className="btn btn-primary btn-block"
            onClick={onStartDev}
          >
            Start Dev 
          </button>
        </div>
        </div>
        
    </React.Fragment>
  );
};
export default DevStatus;
