"use client"

import { useIntl } from "react-intl"

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

import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

import AwardPoints from "./AwardPoints"

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

import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
import { RewardTransactionTypes } from "@/types/components/myPages/myPage/enums"

export default function Row({ transaction }: RowProps) {
  const intl = useIntl()
  const lang = useLang()

  const nightString = `${transaction.nights} ${transaction.nights === 1 ? intl.formatMessage({ id: "night" }) : intl.formatMessage({ id: "nights" })}`

  let description =
    transaction.hotelName && transaction.city
      ? `${transaction.hotelName}, ${transaction.city} ${nightString}`
      : `${nightString}`

  switch (transaction.type) {
    case RewardTransactionTypes.stay:
      if (transaction.hotelId === "ORS")
        description = intl.formatMessage({ id: "Former Scandic Hotel" })
      break
    case RewardTransactionTypes.ancillary:
      description = intl.formatMessage({ id: "Extras to your booking" })
      break
    case RewardTransactionTypes.enrollment:
      description = intl.formatMessage({ id: "Sign up bonus" })
      break
    case RewardTransactionTypes.mastercard_points:
      description = intl.formatMessage({ id: "Scandic Friends Mastercard" })
      break
    case RewardTransactionTypes.tui_points:
      description = intl.formatMessage({ id: "TUI Points" })
    case RewardTransactionTypes.stayAdj:
      if (transaction.confirmationNumber === "BALFWD")
        description = intl.formatMessage({
          id: "Points earned prior to May 1, 2021",
        })
      break
    case RewardTransactionTypes.pointShop:
      description = intl.formatMessage({ id: "Scandic Friends Point Shop" })
      break
  }

  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
  const transactionDate = dt(transaction.transactionDate)
    .locale(lang)
    .format("DD MMM YYYY")

  return (
    <tr className={styles.tr}>
      <AwardPoints
        awardPoints={transaction.awardPoints}
        isCalculated={transaction.pointsCalculated}
      />
      <td className={`${styles.td} ${styles.description}`}>{description}</td>
      <td className={styles.td}>
        {transaction.type === RewardTransactionTypes.stay &&
        transaction.bookingUrl ? (
          <Link variant="underscored" href={transaction.bookingUrl}>
            {transaction.confirmationNumber}
          </Link>
        ) : (
          transaction.confirmationNumber
        )}
      </td>
      <td className={styles.td}>
        {transaction.checkinDate ? arrival : transactionDate}
      </td>
    </tr>
  )
}