import React from "react";
import Camera from "./UIElements/Camera";
import Axios from "axios";
import { useEffect, useState } from "react";

const Cameras = ({socket}) => {
  const [cameraData0, setCameraData0] = useState([]);
  const [cameraData1, setCameraData1] = useState([]);
  const [cameraData2, setCameraData2] = useState([]);
  const [cameraData3, setCameraData3] = useState([]);
  const [newCameraData, setNewCameraData] = useState([]);

  socket.on("cameraData", (res) => {
    console.log(res)
switch ( res.cam_id )
{
  case 0 : setCameraData0(res);
  break;
  case 1 : setCameraData1(res);
  break;
  case 2 : setCameraData2(res);
  break;
  case 3 : setCameraData3(res);
  break;

}
  })
  // useEffect(() => {
  //   Axios({
  //     method: "GET",
  //     withCredentials: true,
  //     url: process.env.REACT_APP_BACKEND_URL + "/cameraInfo",
  //   }).then(async (res) => {
  //     console.log("********************");
  //     setCameraData(res.data);
  //     console.log(res.data);
  //   });
  // }, [newCameraData]);
  return (
    <React.Fragment>
      <div className="row  m-1 py-1">
          <div className="col-3 px-1" >
            <Camera data={cameraData0}></Camera>
          </div>
          <div className="col-3 px-1" >
            <Camera data={cameraData1}></Camera>
          </div>
          <div className="col-3 px-1" >
            <Camera data={cameraData2}></Camera>
          </div>
          <div className="col-3 px-1" >
            <Camera data={cameraData3}></Camera>
          </div>                              
      </div>
    </React.Fragment>
  );
};
export default Cameras;
