import React, { useEffect } from "react";
import "./App.css";
import { useAppSelector } from "./store/hooks";
import { createHashRouter, RouterProvider } from "react-router-dom";

import ErrorPage from "./page/ErrorPage";
import { MyObservable } from "./context/MyObservable";
import { Observable } from "@babylonjs/core";
import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
import LDPage from "./page/LDPage";
import LinePageOneOne from "./page/LinePage1-1";
import LinePageOneTwo from "./page/LinePage1-2";
import LinePageTwoOne from "./page/LinePage2-1";
import LinePageTwoTwo from "./page/LinePage2-2";
import LinePageThreeOne from "./page/LinePage3-1";
import LinePageThreeTwo from "./page/LinePage3-2";
import LinePageFourOne from "./page/LinePage4-1";
import LinePageFourTwo from "./page/LinePage4-2";
import LinePageFiveOne from "./page/LinePage5-1";
import LinePageFiveTwo from "./page/LinePage5-2";

const onGlassObservable = new Observable();

function App() {
  const thisLineGlassStatus = useAppSelector(selectGlassStatus);
  onGlassObservable.notifyObservers(thisLineGlassStatus);

  const router = createHashRouter([
    {
      path: "/LD",
      element: <LDPage />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/1-1",
      element: <LinePageOneOne />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/1-2",
      element: <LinePageOneTwo />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/2-1",
      element: <LinePageTwoOne />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/2-2",
      element: <LinePageTwoTwo />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/3-1",
      element: <LinePageThreeOne />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/3-2",
      element: <LinePageThreeTwo />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/4-1",
      element: <LinePageFourOne />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/4-2",
      element: <LinePageFourTwo />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/5-1",
      element: <LinePageFiveOne />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/LP/5-2",
      element: <LinePageFiveTwo />,
      errorElement: <ErrorPage />,
    },
  ]);
  useEffect(() => {
    const timerId = setInterval(() => {
      window.location.reload();
    }, 43200000);

    return () => {
      clearInterval(timerId);
    };
  }, []);

  return (
    <MyObservable.Provider value={onGlassObservable}>
      <div className="background">
        <RouterProvider router={router} />
      </div>
    </MyObservable.Provider>
  );
}

export default App;