import React from "react";
import { useLocation } from "react-router-dom";
import SidebarNavigation from "@app/components/sidebar-navigation/SidebarNavigation";
import { useViewMode } from "@settings/contexts/ViewModeContext";
import { APP_ROUTES } from "@settings/routes/AppRoutes";
import DisabledBanner from "../disabled-banner/DisabledBanner";
import AccessLostBanner from "../access-lost-banner/AccessLostBanner";
import "./app-layout-styles.scss";

export interface AppLayoutProps {
  children: React.ReactNode;
  /** Optional dismissible notice rendered above everything else (e.g. the
   *  reactivation-success AlertBar), owned by the caller's own state. */
  topBanner?: React.ReactNode;
}

/** Routes that render a full-bleed platform iframe — no content gutter/max-width.
 *  Derived from AppRoutes' own route table instead of a hand-copied
 *  path list, so a route's full-bleed-ness can't silently drift out of sync. */
const FULL_BLEED_ROUTES = APP_ROUTES.filter((route) => route.fullBleed).map(
  (route) => `/${route.path}`
);

const AppLayout: React.FC<AppLayoutProps> = ({ children, topBanner }) => {
  const { isMobileView } = useViewMode();
  const { pathname } = useLocation();

  const isFullBleed = FULL_BLEED_ROUTES.includes(pathname);
  const contentClass = `sfsync-app-layout__content${
    isFullBleed ? " sfsync-app-layout__content--full-bleed" : ""
  }`;

  return (
    <div
      className={`sfsync-app-layout ${
        isMobileView ? "sfsync-app-layout--mobile" : ""
      }`}
    >
      <div className="sfsync-app-layout__sidebar">
        <SidebarNavigation isMobileView={isMobileView} />
      </div>
      <div className="sfsync-app-layout__main-column">
        {topBanner}
        <DisabledBanner />
        <AccessLostBanner />
        <main className={contentClass}>{children}</main>
      </div>
    </div>
  );
};

export default AppLayout;