import { notFound } from "next/navigation"
import { Suspense } from "react"

import { env } from "@/env/server"
import { getDestinationCountryPage } from "@/lib/trpc/memoizedRequests"

import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"

import Blocks from "../Blocks"
import CityDataContainer, { preload } from "../CityDataContainer"
import CityListing from "../CityListing"
import ExperienceList from "../ExperienceList"
import SidebarContentWrapper from "../SidebarContentWrapper"
import DestinationPageSidePeek from "../Sidepeek"
import TopImages from "../TopImages"
import DestinationTracking from "../Tracking"
import CountryMap from "./CountryMap"
import DestinationCountryPageSkeleton from "./DestinationCountryPageSkeleton"

import styles from "./destinationCountryPage.module.css"

interface DestinationCountryPageProps {
  isMapView: boolean
}

export default async function DestinationCountryPage({
  isMapView,
}: DestinationCountryPageProps) {
  const pageData = await getDestinationCountryPage()

  if (!pageData) {
    return notFound()
  }

  const { tracking, destinationCountryPage, translatedCountry } = pageData
  const {
    blocks,
    images,
    preamble,
    experiences,
    has_sidepeek,
    sidepeek_button_text,
    sidepeek_content,
    destination_settings,
  } = destinationCountryPage

  preload(destination_settings.country)

  return (
    <>
      <Suspense fallback={<DestinationCountryPageSkeleton />}>
        <CityDataContainer country={destination_settings.country}>
          {isMapView ? (
            <CountryMap
              mapId={env.GOOGLE_DYNAMIC_MAP_ID}
              apiKey={env.GOOGLE_STATIC_MAP_KEY}
              country={translatedCountry}
              defaultLocation={destination_settings.location}
            />
          ) : (
            <div className={styles.pageContainer}>
              <div className={styles.header}>
                <Suspense fallback={<BreadcrumbsSkeleton />}>
                  <Breadcrumbs />
                </Suspense>
                {images?.length ? (
                  <TopImages
                    images={images}
                    destinationName={translatedCountry}
                  />
                ) : null}
              </div>
              <main className={styles.mainContent}>
                <CityListing />
                {blocks && <Blocks blocks={blocks} />}
              </main>
              <aside className={styles.sidebar}>
                <SidebarContentWrapper
                  location={translatedCountry}
                  preamble={preamble}
                >
                  <ExperienceList experiences={experiences} />
                  {has_sidepeek && sidepeek_content && (
                    <DestinationPageSidePeek
                      buttonText={sidepeek_button_text}
                      sidePeekContent={sidepeek_content}
                      location={translatedCountry}
                    />
                  )}
                </SidebarContentWrapper>
              </aside>
            </div>
          )}
        </CityDataContainer>
      </Suspense>
      <DestinationTracking pageData={tracking} />
    </>
  )
}
