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

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

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

import Blocks from "../Blocks"
import ExperienceList from "../ExperienceList"
import HotelDataContainer, { preload } from "../HotelDataContainer"
import HotelListing from "../HotelListing"
import SidebarContentWrapper from "../SidebarContentWrapper"
import DestinationPageSidePeek from "../Sidepeek"
import StaticMap from "../StaticMap"
import TopImages from "../TopImages"
import DestinationTracking from "../Tracking"
import CityMap from "./CityMap"
import DestinationCityPageSkeleton from "./DestinationCityPageSkeleton"

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

interface DestinationCityPageProps {
  isMapView: boolean
}

export default async function DestinationCityPage({
  isMapView,
}: DestinationCityPageProps) {
  const pageData = await getDestinationCityPage()

  if (!pageData) {
    notFound()
  }

  const { tracking, destinationCityPage, cityIdentifier, city } = pageData
  const {
    blocks,
    images,
    preamble,
    experiences,
    has_sidepeek,
    sidepeek_button_text,
    sidepeek_content,
    destination_settings,
  } = destinationCityPage

  preload(cityIdentifier)

  return (
    <>
      <Suspense fallback={<DestinationCityPageSkeleton />}>
        <HotelDataContainer cityIdentifier={cityIdentifier}>
          {isMapView ? (
            <CityMap
              mapId={env.GOOGLE_DYNAMIC_MAP_ID}
              apiKey={env.GOOGLE_STATIC_MAP_KEY}
              city={city}
              defaultLocation={destination_settings.location}
            />
          ) : (
            <div className={styles.pageContainer}>
              <div className={styles.header}>
                <Suspense fallback={<BreadcrumbsSkeleton />}>
                  <Breadcrumbs />
                </Suspense>
                {images?.length ? (
                  <TopImages images={images} destinationName={city.name} />
                ) : null}
              </div>
              <main className={styles.mainContent}>
                <HotelListing />
                {blocks && <Blocks blocks={blocks} />}
              </main>
              <aside className={styles.sidebar}>
                <SidebarContentWrapper location={city.name} preamble={preamble}>
                  <ExperienceList experiences={experiences} />
                  {has_sidepeek && sidepeek_content && (
                    <DestinationPageSidePeek
                      buttonText={sidepeek_button_text}
                      sidePeekContent={sidepeek_content}
                      location={city.name}
                    />
                  )}

                  {destination_settings.city && (
                    <StaticMap
                      city={destination_settings.city}
                      location={destination_settings.location}
                    />
                  )}
                </SidebarContentWrapper>
              </aside>
            </div>
          )}
        </HotelDataContainer>
      </Suspense>
      <DestinationTracking pageData={tracking} />
    </>
  )
}
