import React, { useEffect } from "react";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./style.scss";
import { useViewMode } from "./contexts/ViewModeContext";
import SidebarNavigation from "@app/components/sidebar-navigation/SidebarNavigation";
import AppRoutes from "./routes/AppRoutes";
import { useSettings } from "./contexts/SettingsContext";
import SplashScreen from "./components/splash/SplashScreen";
import DisabledBanner from "./components/disabled-banner/DisabledBanner";

const App = () => {
  const { isMobileView } = useViewMode();
  const { initialSettings, showNotification } = useSettings();
  const localization = sfsyncI18n.data;

  const isOnboarded = !!initialSettings.api_key_verified;

  useEffect(() => {
    if (sfsyncData.reactivation_success) {
      showNotification("success", localization.reactivation_success_message);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  let content;
  if (!isOnboarded) {
    content = <SplashScreen />;
  } else {
    content = (
      <>
        <DisabledBanner />
        <div
          className={`main-container ${
            isMobileView ? "sfsync-settings-mobile" : ""
          }`}
        >
          <div className="sidebar-expanded">
            <SidebarNavigation isMobileView={isMobileView} />
          </div>
          <div className="content">
            <AppRoutes />
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <ToastContainer
        position="top-right"
        autoClose={0}
        hideProgressBar={true}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        theme="light"
      />
      {content}
    </>
  );
};

export default App;