"use client"

import { useEffect, useState } from "react"
import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"
import { useEnterDetailsStore } from "@/stores/enter-details"

import { ArrowRightIcon } from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"

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

import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData"

export default function Summary({
  isMember,
  room,
}: {
  isMember: boolean
  room: RoomsData
}) {
  const [chosenBed, setChosenBed] = useState<string | undefined>()
  const [chosenBreakfast, setCosenBreakfast] = useState<string | undefined>()
  const intl = useIntl()
  const lang = useLang()
  const { fromDate, toDate, bedType, breakfast } = useEnterDetailsStore(
    (state) => ({
      fromDate: state.roomData.fromDate,
      toDate: state.roomData.toDate,
      rooms: state.roomData.room,
      hotel: state.roomData.hotel,
      bedType: state.userData.bedType,
      breakfast: state.userData.breakfast,
    })
  )

  const diff = dt(toDate).diff(fromDate, "days")

  const nights = intl.formatMessage(
    { id: "booking.nights" },
    { totalNights: diff }
  )

  let color: "uiTextHighContrast" | "red" = "uiTextHighContrast"
  if (isMember) {
    color = "red"
  }

  useEffect(() => {
    setChosenBed(bedType)
    setCosenBreakfast(breakfast)
  }, [bedType, breakfast])

  return (
    <section className={styles.summary}>
      <header>
        <Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
        <Body className={styles.date} color="baseTextMediumContrast">
          {dt(fromDate).locale(lang).format("ddd, D MMM")}
          <ArrowRightIcon color="peach80" height={15} width={15} />
          {dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
        </Body>
      </header>
      <Divider color="primaryLightSubtle" />
      <div className={styles.addOns}>
        <div>
          <div className={styles.entry}>
            <Body color="textHighContrast">{room.roomType}</Body>
            <Caption color={color}>
              {intl.formatMessage(
                { id: "{amount} {currency}" },
                { amount: room.price, currency: "SEK" }
              )}
            </Caption>
          </div>
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage(
              { id: "booking.adults" },
              { totalAdults: room.adults }
            )}
          </Caption>
          {room.children?.length ? (
            <Caption color="uiTextMediumContrast">
              {intl.formatMessage(
                { id: "booking.children" },
                { totalChildren: room.children.length }
              )}
            </Caption>
          ) : null}
          <Caption color="uiTextMediumContrast">
            {room.cancellationText}
          </Caption>
          <Link color="burgundy" href="#" variant="underscored" size="small">
            {intl.formatMessage({ id: "Rate details" })}
          </Link>
        </div>

        {chosenBed ? (
          <div className={styles.entry}>
            <div>
              <Body color="textHighContrast">{chosenBed}</Body>
              <Caption color="uiTextMediumContrast">
                {intl.formatMessage({ id: "Based on availability" })}
              </Caption>
            </div>

            <Caption color="uiTextMediumContrast">
              {intl.formatMessage(
                { id: "{amount} {currency}" },
                { amount: "0", currency: "SEK" }
              )}
            </Caption>
          </div>
        ) : null}

        {chosenBreakfast ? (
          <div className={styles.entry}>
            <Body color="textHighContrast">{chosenBreakfast}</Body>
            <Caption color="uiTextMediumContrast">
              {intl.formatMessage(
                { id: "{amount} {currency}" },
                { amount: "0", currency: "SEK" }
              )}
            </Caption>
          </div>
        ) : null}
      </div>
      <Divider color="primaryLightSubtle" />
      <div className={styles.total}>
        <div className={styles.entry}>
          <div>
            <Body>
              {intl.formatMessage<React.ReactNode>(
                { id: "<b>Total price</b> (incl VAT)" },
                { b: (str) => <b>{str}</b> }
              )}
            </Body>
            <Link color="burgundy" href="#" variant="underscored" size="small">
              {intl.formatMessage({ id: "Price details" })}
            </Link>
          </div>
          <div>
            <Body textTransform="bold">
              {intl.formatMessage(
                { id: "{amount} {currency}" },
                { amount: room.price, currency: "SEK" } // TODO: calculate total price
              )}
            </Body>
            <Caption color="uiTextMediumContrast">
              {intl.formatMessage({ id: "Approx." })}{" "}
              {intl.formatMessage(
                { id: "{amount} {currency}" },
                { amount: "455", currency: "EUR" }
              )}
            </Caption>
          </div>
        </div>
        <Divider color="primaryLightSubtle" />
      </div>
    </section>
  )
}
