import { Fragment } from "react"
import { useIntl } from "react-intl"

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

import Divider from "@/components/TempDesignSystem/Divider"
import { formatPrice } from "@/utils/numberFormatting"

import PriceRow from "./PriceRow"

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

interface PriceSummaryProps {
  totalPrice: number | null
  totalPoints: number | null

  items: {
    title: string
    totalPrice: number
    currency: string
    points?: number
    quantityWithCard?: number
    quantityWithPoints?: number
  }[]
}

export default function PriceSummary({
  totalPrice,
  totalPoints,
  items,
}: PriceSummaryProps) {
  const intl = useIntl()
  const hasTotalPoints = typeof totalPoints === "number"
  const hasTotalPrice = typeof totalPrice === "number"

  return (
    <div className={styles.container}>
      <Typography variant="Body/Paragraph/mdBold">
        <h2>
          {intl.formatMessage({
            defaultMessage: "Summary",
          })}
        </h2>
      </Typography>
      <Divider color="subtle" />

      {items.map((item) => (
        <Fragment key={item.title}>
          {!!item.quantityWithCard && (
            <PriceRow
              title={item.title}
              quantity={item.quantityWithCard}
              label={intl.formatMessage({
                defaultMessage: "Price including VAT",
              })}
              value={formatPrice(intl, item.totalPrice, item.currency)}
            />
          )}
          {!!item.quantityWithPoints && (
            <PriceRow
              title={item.title}
              quantity={item.quantityWithPoints}
              label={intl.formatMessage({
                defaultMessage: "Points",
              })}
              value={`${item.points} ${intl.formatMessage({
                defaultMessage: "points",
              })}`}
            />
          )}
          <Divider color="subtle" />
        </Fragment>
      ))}

      <div className={styles.column}>
        <Typography variant="Body/Paragraph/mdBold">
          <p>
            {hasTotalPrice
              ? intl.formatMessage({
                  defaultMessage: "Total price including VAT",
                })
              : intl.formatMessage({
                  defaultMessage: "Total points",
                })}
          </p>
        </Typography>
        <div className={styles.totalPrice}>
          {(hasTotalPoints || hasTotalPrice) && (
            <Typography variant="Body/Paragraph/mdBold">
              <p>
                {hasTotalPrice
                  ? formatPrice(intl, totalPrice, items[0]?.currency)
                  : null}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {hasTotalPoints && hasTotalPrice ? " + " : null}
                {hasTotalPoints
                  ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                    `${totalPoints} ${intl.formatMessage({
                      defaultMessage: "points",
                    })}`
                  : null}
              </p>
            </Typography>
          )}
        </div>
      </div>
    </div>
  )
}
