import { useSearchParams } from "next/navigation"
import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"

import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import { calculatePricesPerNight } from "./utils"

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

import { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"

export default function PriceList({
  publicPrice = {},
  memberPrice = {},
  petRoomPackage,
}: PriceListProps) {
  const intl = useIntl()

  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
    publicPrice
  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
    memberPrice

  const petRoomLocalPrice = petRoomPackage?.localPrice
  const petRoomRequestedPrice = petRoomPackage?.requestedPrice

  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
  const searchParams = useSearchParams()
  const fromDate = searchParams.get("fromDate")
  const toDate = searchParams.get("toDate")

  let nights = 1

  if (fromDate && toDate) {
    nights = dt(toDate).diff(dt(fromDate), "days")
  }

  const {
    totalPublicLocalPricePerNight,
    totalMemberLocalPricePerNight,
    totalPublicRequestedPricePerNight,
    totalMemberRequestedPricePerNight,
  } = calculatePricesPerNight({
    publicLocalPrice,
    memberLocalPrice,
    publicRequestedPrice,
    memberRequestedPrice,
    petRoomLocalPrice,
    petRoomRequestedPrice,
    nights,
  })

  return (
    <dl className={styles.priceList}>
      <div className={styles.priceRow}>
        <dt>
          <Caption
            type="bold"
            color={
              totalPublicLocalPricePerNight ? "uiTextHighContrast" : "disabled"
            }
          >
            {intl.formatMessage({ id: "Standard price" })}
          </Caption>
        </dt>
        <dd>
          {publicLocalPrice ? (
            <div className={styles.price}>
              <Subtitle type="two" color="uiTextHighContrast">
                {totalPublicLocalPricePerNight}
              </Subtitle>
              <Body color="uiTextHighContrast" textTransform="bold">
                {publicLocalPrice.currency}
                <span className={styles.perNight}>
                  /{intl.formatMessage({ id: "night" })}
                </span>
              </Body>
            </div>
          ) : (
            <Subtitle type="two" color="baseTextDisabled">
              {intl.formatMessage({ id: "n/a" })}
            </Subtitle>
          )}
        </dd>
      </div>

      <div className={styles.priceRow}>
        <dt>
          <Caption type="bold" color={memberLocalPrice ? "red" : "disabled"}>
            {intl.formatMessage({ id: "Member price" })}
          </Caption>
        </dt>
        <dd>
          {memberLocalPrice ? (
            <div className={styles.price}>
              <Subtitle type="two" color="red">
                {totalMemberLocalPricePerNight}
              </Subtitle>
              <Body color="red" textTransform="bold">
                {memberLocalPrice.currency}
                <span className={styles.perNight}>
                  /{intl.formatMessage({ id: "night" })}
                </span>
              </Body>
            </div>
          ) : (
            <Body textTransform="bold" color="disabled">
              - {intl.formatMessage({ id: "Currency Code" })}
            </Body>
          )}
        </dd>
      </div>

      <div className={styles.priceRow}>
        <dt>
          <Caption
            color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
          >
            {intl.formatMessage({ id: "Approx." })}
          </Caption>
        </dt>
        <dd>
          {showRequestedPrice ? (
            <Caption color="uiTextMediumContrast">
              {totalPublicRequestedPricePerNight}/
              {totalMemberRequestedPricePerNight}{" "}
              {publicRequestedPrice.currency}
            </Caption>
          ) : (
            <Caption color="disabled">- / - EUR</Caption>
          )}
        </dd>
      </div>
    </dl>
  )
}
