"use client"

import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"

import Points from "../../Points"
import Price from "../../Price"

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

import type { PriceType } from "@/types/components/hotelReservation/myStay/myStay"

export type Variant =
  | "Title/Subtitle/lg"
  | "Title/Subtitle/md"
  | "Body/Paragraph/mdBold"

interface TotalPriceProps {
  variant: Variant
  type?: PriceType
}

export default function TotalPrice({
  variant,
  type = "money",
}: TotalPriceProps) {
  const totalPrice = useMyStayTotalPriceStore((state) => state.totalPrice)
  const totalPoints = useMyStayTotalPriceStore((state) => state.totalPoints)
  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)

  const { vouchers, cheques } = bookedRoom

  const intl = useIntl()
  if (type === "money") {
    return <Price price={totalPrice} variant={variant} />
  }

  if (type === "voucher") {
    return (
      <Typography variant={variant}>
        <p>
          {intl.formatMessage({ id: "{count} voucher" }, { count: vouchers })}
        </p>
      </Typography>
    )
  }

  if (type === "cheque") {
    return (
      <div className={styles.totalPrice}>
        <Typography variant={variant}>
          <p>{cheques} CC + </p>
        </Typography>
        <Price price={totalPrice} variant={variant} />
      </div>
    )
  }

  if (totalPrice && totalPrice > 0 && type === "points") {
    return (
      <div className={styles.totalPrice}>
        <Points points={totalPoints} variant={variant} /> +{" "}
        <Price price={totalPrice} variant={variant} />
      </div>
    )
  }

  return <Points points={totalPoints} variant={variant} />
}