"use client"

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

import { webviews } from "@/constants/routes/webviews"
import { dt } from "@/lib/dt"

import Link from "@/components/TempDesignSystem/Link"
import Table from "@/components/TempDesignSystem/Table"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"

import AwardPoints from "../../../AwardPoints"

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

export default function Row({ transaction }: RowProps) {
  const intl = useIntl()
  const lang = useLang()
  const pathName = usePathname()
  const isWebview = webviews.includes(pathName)

  const nightsMsg = intl.formatMessage(
    {
      id: "{nightsAmount, plural, one {# night} other {# nights}}",
    },
    {
      nightsAmount: transaction.nights,
    }
  )

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

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

    case Transactions.rewardType.pointShop:
      description = intl.formatMessage({ id: "Scandic Friends Point Shop" })
      break
  }

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

  function renderConfirmationNumber() {
    if (transaction.confirmationNumber === "BALFWD") return null

    if (
      !isWebview &&
      transaction.bookingUrl &&
      (transaction.type === Transactions.rewardType.stay ||
        transaction.type === Transactions.rewardType.rewardNight)
    ) {
      return (
        <Link variant="underscored" href={transaction.bookingUrl}>
          {transaction.confirmationNumber}
        </Link>
      )
    }

    return transaction.confirmationNumber
  }

  return (
    <Table.TR>
      <Table.TD>
        <AwardPoints
          awardPoints={transaction.awardPoints}
          isCalculated={transaction.pointsCalculated}
        />
      </Table.TD>
      <Table.TD>
        <Body textTransform="bold">{description}</Body>
      </Table.TD>
      <Table.TD>{renderConfirmationNumber()}</Table.TD>
      <Table.TD>
        {transaction.checkinDate && transaction.confirmationNumber !== "BALFWD"
          ? arrival
          : null}
      </Table.TD>
    </Table.TR>
  )
}
