"use client"
import { useIntl } from "react-intl"

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

import { CancellationRuleEnum } from "@/constants/booking"
import { preliminaryReceipt } from "@/constants/routes/myStay"
import { useMyStayStore } from "@/stores/my-stay"

import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import { trackMyStayPageLink } from "@/utils/tracking"

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

export default function ViewAndPrintReceipt() {
  const intl = useIntl()
  const lang = useLang()
  const canDownloadInvoice = useMyStayStore(
    (state) =>
      !state.bookedRoom.isCancelled &&
      !(
        state.bookedRoom.rateDefinition.cancellationRule ===
        CancellationRuleEnum.CancellableBefore6PM
      )
  )

  if (!canDownloadInvoice) {
    return null
  }

  function trackClick() {
    trackMyStayPageLink("download invoice")
  }

  const printMsg = intl.formatMessage({
    defaultMessage: "View and print receipt",
  })

  return (
    <div onClickCapture={trackClick}>
      <Link
        className={styles.download}
        href={preliminaryReceipt[lang]}
        keepSearchParams
        target="_blank"
      >
        <MaterialIcon color="Icon/Interactive/Default" icon="print" />
        <Typography variant="Body/Paragraph/mdBold">
          <span>{printMsg}</span>
        </Typography>
      </Link>
    </div>
  )
}
