"use client"
import { usePathname } from "next/navigation"
import { useIntl } from "react-intl"

import { serializeBookingSearchParams } from "@scandic-hotels/booking-flow/utils/url"
import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"

import { isWebview } from "@/constants/routes/webviews"
import { useMyStayStore } from "@/stores/my-stay"

import useLang from "@/hooks/useLang"

import CustomerSupport from "./CustomerSupport"

import type { BookingWidgetSearchData } from "@scandic-hotels/booking-flow/BookingWidget"

export default function NotUpcoming() {
  const intl = useIntl()
  const pathname = usePathname()
  const { rooms, mainRoom } = useMyStayStore((state) => ({
    rooms: state.rooms,
    mainRoom: state.mainRoom,
  }))
  const lang = useLang()

  const bookingData: BookingWidgetSearchData = {
    hotelId: mainRoom.hotelId,
    rooms: [mainRoom, ...rooms].map((room) => ({
      adults: room.adults,
      childrenInRoom: room.childrenInRoom,
    })),
  }

  if (mainRoom.bookingCode) {
    bookingData.bookingCode = mainRoom.bookingCode
  }
  if (mainRoom.bookingType === RateTypeEnum.Redemption) {
    bookingData.searchType = "redemption"
  }

  const rebookUrl = serializeBookingSearchParams(bookingData)

  const url = `/${lang}?${rebookUrl}`

  return (
    <>
      {!isWebview(pathname) && (
        <ButtonLink
          variant="Tertiary"
          size="Medium"
          href={url}
          typography="Body/Supporting text (caption)/smBold"
        >
          {intl.formatMessage({
            defaultMessage: "Rebook",
            id: "myStay.referenceCard.actions.rebook",
          })}
        </ButtonLink>
      )}

      <CustomerSupport />
    </>
  )
}