import { FloatingBookingWidget } from "@scandic-hotels/booking-flow/BookingWidget/FloatingBookingWidget"
import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
import Image from "@scandic-hotels/design-system/Image"
import { InfoBox } from "@scandic-hotels/design-system/InfoBox"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"

import { bookingFlowConfig } from "@/constants/bookingFlowConfig"

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import LandingPageHeroImage from "@/public/_static/img/landing-page-hero.png"

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

import type { LangParams, PageArgs } from "@/types/params"

export default async function Home(props: PageArgs<LangParams>) {
  const searchParams = await props.searchParams

  const booking = parseBookingWidgetSearchParams(searchParams)

  const lang = await getLang()
  const intl = await getIntl()

  const trackingData = {
    pageName: "startpage",
    pageType: "startpage",
    channel: "homepage",
    domainLanguage: lang,
    siteSections: "startpage",
    siteVersion: "new-web",
  } as const

  return (
    <>
      <section className={styles.mainContent}>
        <div className={styles.contentContainer}>
          <section className={styles.bookingWidgetWrapper}>
            <Typography variant="Title/lg">
              <h1 className={styles.heading}>
                {intl.formatMessage({
                  id: "partnerSas.startPage.heading",
                  defaultMessage: "Book a hotel at the best price",
                })}
              </h1>
            </Typography>
            <FloatingBookingWidget
              booking={booking}
              lang={lang}
              config={bookingFlowConfig}
            />
          </section>
          {bookingFlowConfig.redemptionType !== "disabled" && (
            <section className={styles.infoBoxes}>
              <InfoBox
                heading={intl.formatMessage({
                  id: "partnerSas.startPage.infoBox1.heading",
                  defaultMessage: "Earn points",
                })}
                text={intl.formatMessage({
                  id: "partnerSas.startPage.infoBox1.text",
                  defaultMessage:
                    "Collect new SAS EuroBonus points with your bookings.",
                })}
                theme="SAS-Blue"
                icon={IconName.Diamond}
              />
              <InfoBox
                heading={intl.formatMessage({
                  id: "partnerSas.startPage.infoBox2.heading",
                  defaultMessage: "Pay with points",
                })}
                text={intl.formatMessage({
                  id: "partnerSas.startPage.infoBox2.text",
                  defaultMessage:
                    "Then use your points to pay for your next Scandic stay!",
                })}
                theme="SAS-Blue"
                icon={IconName.CreditCard}
              />
            </section>
          )}
        </div>
        <Image
          alt="Hero Image"
          className={styles.backdrop}
          src={LandingPageHeroImage}
          sizes="100vw"
          quality={80}
          loading="lazy"
        />
      </section>
      <TrackingSDK pageData={trackingData} />
    </>
  )
}