import { BookingWidget } from "@scandic-hotels/booking-flow/BookingWidget"
import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
import { serverClient } from "@/lib/trpc"

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

import { ClientComponent } from "../../../components/ClientComponent"

type SearchParams<S = object> = {
  searchParams: Promise<S & { [key: string]: string }>
}

export default async function Debug(props: SearchParams) {
  const searchParams = await props.searchParams
  const intl = await getIntl()
  const lang = await getLang()
  const caller = await serverClient()
  const destinations = await caller.autocomplete.destinations({
    lang,
    includeTypes: ["hotels"],
    query: "Göteborg",
  })
  const hotel = destinations.hits.hotels[0].name

  const booking = parseBookingWidgetSearchParams(searchParams)

  return (
    <div style={{ padding: "20px" }}>
      <Typography>
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        <p>from booking-flow package:</p>
      </Typography>
      <BookingWidget booking={booking} lang={lang} config={bookingFlowConfig} />
      <hr />
      <Typography variant="Title/Decorative/lg">
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        <p>hello world with data: {hotel}</p>
      </Typography>
      <Typography>
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        <p>
          translated:
          {intl.formatMessage({ defaultMessage: "Map of the city" })}
        </p>
      </Typography>
      <hr />
      <ClientComponent />
    </div>
  )
}