import React, { useState, useEffect, useContext } from "react";
import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
import { format, addDays } from "date-fns";
import { Dashboard } from "@/components/main/routes/Dashboard";
import {
  loadStorageOrDefault,
  persistStorage,
} from "@/components/main/lib/state";
import { mergeDeepRight } from "ramda";
import {
  createBrowserRouter,
  RouterProvider,
  useNavigate,
  useMatches,
} from "react-router-dom";
import * as reactRouter from "react-router-dom";

const STORAGE_KEY = "ecoplanet";

const routes = {
  dashboard: {
    id: "Dashboard",
    path: "/",
  },
  options: {
    id: "Options",
    path: "/options",
  },
};

const Navigation = function ({ router }) {
  const navigate = useNavigate();
  const matches = useMatches();

  const onUpdateRoute = (routePath: string) => {
    navigate(routePath);
  };

  const activeRouteId = matches[0]?.id;

  return (
    <nav>
      <ul className="flex mb-4 space-x-3">
        {/*
         * Ideally we would not map over the routes object, as object items are sorted by the runtime,
         * so they might not represent the data from the source code!
         * But for this use-case this is enough.
         */}
        {Object.entries(routes).map(([key, route]) => {
          const id = route.id;
          const className = id === activeRouteId ? "font-bold" : "";
          return (
            <li className={className} key={id}>
              <button onClick={() => onUpdateRoute(route.path)}>{id}</button>
            </li>
          );
        })}
      </ul>
    </nav>
  );
};

const Base = function ({ children }) {
  return (
    <div className="flex flex-col grow items-center justify-center h-full w-full bg-muted">
      <Navigation />
      {children}
    </div>
  );
};

const App: React.FC = () => {
  const [state, setState] = useState(loadStorageOrDefault());

  useEffect(() => {
    persistStorage(state);
  }, [state]);

  const updateState = function (newState) {
    setState(mergeDeepRight(state, newState));
  };

  const router = createBrowserRouter([
    {
      ...routes.dashboard,
      element: (
        <Base id="Dashboard">
          <Dashboard state={state} updateState={updateState} />
        </Base>
      ),
    },
    {
      ...routes.options,
      element: (
        <Base id="Dashboard">
          <div>Hello world!</div>,
        </Base>
      ),
    },
  ]);

  return (
    <div className="fixed top-0 right-0 bottom-0 left-0 flex">
      <main className="flex grow flex-col">
        <RouterProvider router={router} />
      </main>
    </div>
  );
};

export default App;