import React from "react";
// import io from 'socket.io-client';
import { Router } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import i18next from "i18next";
import history from "./store/utils/history";
import AppRoutes from "./AppRoutes";
import Header from "./components/Header/Header";
import { StyledEngineProvider } from "@mui/material";
import GlobalStyle from "./components/Styles/globalStyles";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

// const URL = "http://192.168.88.143:3001";
// const socket = io(URL, {autoConnect: true, transports: ['websocket']});
const App = () => {
  // console.log(io)

  // const [isConnected, setIsConnected] = useState(socket.connected);
  // const [lastPong, setLastPong] = useState(null);
  // console.log();
  // useEffect(() => {
  //   socket.on("connect", (client) => {
  //     console.log(client);
  //     setIsConnected(true);
  //   });
  //   // socket.on("connect_error", (err) => {
  //   //   console.log(err);
  //   // });

  //   socket.on("connection", (client) => {
  //     console.log(client);
  //   });

  //   socket.on("disconnect", () => {
  //     setIsConnected(false);
  //   });

  //   // socket.on('emit', (client) => {
  //   //   console.log(client);
  //   // })
  //   socket.on("sokkk", (clg) => {
  //     console.log(clg);
  //   })
  //   // socket.onAny((event, ...args) => {
  //   //   console.log(event, args);
  //   // });
  //   socket.on('povratna', (data) => {
  //     console.log(data)

  // })

  //   // socket.open;

  //   socket.on("pong", () => {
  //     setLastPong(new Date().toISOString());
  //   });

  //   // socket.connect();

  //   return () => {
  //     socket.off("connect");
  //     socket.off("disconnect");
  //     socket.off("pong");
  //   };
  // }, []);
  // const handleClick = () => {
  //   // socket.connect();
  //   // socket.emit("sokkk 2", "sock");
  //   // socket.emit("sock")
  // };
  // const sendPing = () => {
  //   socket.emit("sokkk", {
  //     poruka: "Za Duleta"
  //   });
  // };
  return (
    <Router history={history}>
      <Helmet>
        <title>{i18next.t("app.title")}</title>
      </Helmet>
      <StyledEngineProvider injectFirst>
        <Header />
        <GlobalStyle />
        <ToastContainer />
          {/* <div>
          <p>Connected: {"" + isConnected}</p>
          <br />
          <p>Last pong: {lastPong || "-"}</p>
          <br />
          <button onClick={sendPing}>Send ping</button>
        </div> */}
          <AppRoutes />
      </StyledEngineProvider>
    </Router>
  );
};

export default App;
