import {
  CachedHeader,
  DynamicHeader,
  HeaderFallback,
} from "@/components/header";
import {
  CachedFooter,
  DynamicFooter,
  FooterFallback,
} from "@/components/footer";
import { DisableDraftMode } from "@/components/disable-draft-mode";
import AnnouncementBar from "@/components/announcement-bar";
import { VisualEditing } from "next-sanity/visual-editing";
import { draftMode } from "next/headers";
import { SanityLive } from "@/sanity/lib/live";
import { Suspense } from "react";
import { revalidateTags } from "@/app/actions/revalidate";

const isConfiguredSanity =
  Boolean(process.env.NEXT_PUBLIC_SANITY_PROJECT_ID) &&
  process.env.NEXT_PUBLIC_SANITY_PROJECT_ID !== "your-project-id";

export default async function MainLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { isEnabled: isDraftMode } = await draftMode();

  return (
    <>
      <div className="sticky top-0 z-50 w-full">
        <AnnouncementBar />
        {isDraftMode ? (
          <Suspense fallback={<HeaderFallback />}>
            <DynamicHeader />
          </Suspense>
        ) : (
          <CachedHeader perspective="published" stega={false} />
        )}
      </div>
      <main>{children}</main>
      {isConfiguredSanity && (
        <SanityLive action={revalidateTags} includeDrafts={isDraftMode} />
      )}
      {isDraftMode && (
        <>
          <DisableDraftMode />
          <VisualEditing />
        </>
      )}
      {isDraftMode ? (
        <Suspense fallback={<FooterFallback />}>
          <DynamicFooter />
        </Suspense>
      ) : (
        <CachedFooter perspective="published" stega={false} />
      )}
    </>
  );
}