import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"

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

import {
  AncillaryStepEnum,
  type BreakfastData,
  useAddAncillaryStore,
} from "@/stores/my-stay/add-ancillary-flow"

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

import PriceSummary from "./PriceSummary"

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

import type { SelectedAncillary } from "@/types/components/myPages/myStay/ancillaries"

interface PriceDetailsProps {
  isPriceDetailsOpen: boolean
}

export default function PriceDetails({
  isPriceDetailsOpen,
}: PriceDetailsProps) {
  const intl = useIntl()

  const { currentStep, selectedAncillary, isBreakfast, breakfastData } =
    useAddAncillaryStore((state) => ({
      currentStep: state.currentStep,
      selectedAncillary: state.selectedAncillary,
      isBreakfast: state.isBreakfast,
      breakfastData: state.breakfastData,
    }))
  const quantityWithPoints = useWatch({ name: "quantityWithPoints" })
  const quantityWithCard = useWatch({ name: "quantityWithCard" })

  if (
    !selectedAncillary ||
    (currentStep !== AncillaryStepEnum.confirmation && !isBreakfast)
  ) {
    return null
  }

  if (isBreakfast && !breakfastData) {
    return null
  }

  const totalPrice = isBreakfast
    ? breakfastData!.priceAdult *
        breakfastData!.nrOfAdults *
        breakfastData!.nrOfNights +
      breakfastData!.priceChild *
        breakfastData!.nrOfPayingChildren *
        breakfastData!.nrOfNights
    : quantityWithCard && selectedAncillary
      ? selectedAncillary.price.total * quantityWithCard
      : null

  const totalPoints =
    quantityWithPoints && selectedAncillary?.points
      ? selectedAncillary.points * quantityWithPoints
      : null

  const hasTotalPoints = typeof totalPoints === "number"
  const hasTotalPrice = typeof totalPrice === "number"

  function getBreakfastItems(
    selectedAncillary: SelectedAncillary,
    breakfastData: BreakfastData | null
  ) {
    if (!breakfastData) {
      return []
    }

    const items = [
      {
        title: `${selectedAncillary.title} / ${intl.formatMessage({
          defaultMessage: "adult",
        })}`,
        totalPrice: breakfastData.priceAdult,
        currency: breakfastData.currency,
        quantityWithCard: breakfastData.nrOfAdults * breakfastData.nrOfNights,
      },
    ]

    if (breakfastData.nrOfPayingChildren > 0) {
      items.push({
        title: `${selectedAncillary.title} / ${intl.formatMessage({
          defaultMessage: "Children",
        })} 4-12`,
        totalPrice: breakfastData.priceChild,
        currency: breakfastData.currency,
        quantityWithCard:
          breakfastData.nrOfPayingChildren * breakfastData.nrOfNights,
      })
    }

    if (breakfastData.nrOfFreeChildren > 0) {
      items.push({
        title: `${selectedAncillary.title} / ${intl.formatMessage(
          {
            defaultMessage: "Children under {age}",
          },
          { age: 4 }
        )}`,
        totalPrice: 0,
        currency: breakfastData.currency,
        quantityWithCard:
          breakfastData.nrOfFreeChildren * breakfastData.nrOfNights,
      })
    }

    return items
  }

  const items = isBreakfast
    ? getBreakfastItems(selectedAncillary, breakfastData)
    : [
        {
          title: selectedAncillary.title,
          totalPrice: selectedAncillary.price.total,
          currency: selectedAncillary.price.currency,
          points: selectedAncillary.points,
          quantityWithCard,
          quantityWithPoints,
        },
      ]

  return (
    <>
      <div className={styles.totalPrice}>
        <div className={styles.totalPriceInclVAT}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {intl.formatMessage({
                defaultMessage: "Total",
              })}
            </p>
          </Typography>
          {totalPrice && (
            <Typography variant="Body/Paragraph/mdRegular">
              <p className={styles.vatText}>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {`(${intl.formatMessage({
                  defaultMessage: "Incl. VAT",
                })})`}
              </p>
            </Typography>
          )}
          {isBreakfast && breakfastData ? (
            <Typography variant="Body/Paragraph/mdBold">
              <p className={styles.hideOnDesktop}>
                {intl.formatMessage(
                  {
                    defaultMessage:
                      "{totalNights, plural, one {# night} other {# nights}}",
                  },
                  {
                    totalNights: breakfastData.nrOfNights,
                  }
                ) +
                  /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
                  " / " +
                  intl.formatMessage(
                    {
                      defaultMessage:
                        "{value, plural, one {# guest} other {# guests}}",
                    },
                    {
                      value:
                        breakfastData.nrOfAdults +
                        breakfastData.nrOfPayingChildren +
                        breakfastData.nrOfFreeChildren,
                    }
                  )}
              </p>
            </Typography>
          ) : null}
        </div>
        <div className={styles.totalPriceValue}>
          {isBreakfast && breakfastData ? (
            <>
              <Typography variant="Body/Paragraph/mdBold">
                <p className={styles.showOnDesktop}>
                  {intl.formatMessage(
                    {
                      defaultMessage:
                        "{totalNights, plural, one {# night} other {# nights}}",
                    },
                    {
                      totalNights: breakfastData.nrOfNights,
                    }
                  ) +
                    /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
                    " / " +
                    intl.formatMessage(
                      {
                        defaultMessage:
                          "{value, plural, one {# guest} other {# guests}}",
                      },
                      {
                        value:
                          breakfastData.nrOfAdults +
                          breakfastData.nrOfPayingChildren +
                          breakfastData.nrOfFreeChildren,
                      }
                    )}
                </p>
              </Typography>
              <Divider variant="vertical" color="subtle" />
            </>
          ) : null}
          {hasTotalPrice && (
            <Typography variant="Body/Paragraph/mdBold">
              <p>
                {formatPrice(
                  intl,
                  totalPrice,
                  selectedAncillary.price.currency
                )}
              </p>
            </Typography>
          )}
          {hasTotalPoints && hasTotalPrice && (
            <Divider variant="vertical" color="subtle" />
          )}
          {hasTotalPoints && (
            <div>
              <div>
                <Divider variant="vertical" color="subtle" />
              </div>
              <Typography variant="Body/Paragraph/mdBold">
                <p>
                  {totalPoints}
                  {
                    /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
                    " "
                  }
                  {intl.formatMessage({
                    defaultMessage: "points",
                  })}
                </p>
              </Typography>
            </div>
          )}
        </div>
      </div>
      <Divider color="subtle" />
      {isPriceDetailsOpen && currentStep === AncillaryStepEnum.confirmation && (
        <PriceSummary
          totalPrice={totalPrice}
          totalPoints={totalPoints}
          items={items}
        />
      )}
    </>
  )
}
