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

import { useRatesStore } from "@/stores/select-rate"

import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting"

import { isBookingCodeRate } from "./isBookingCodeRate"
import { mapRate } from "./mapRate"
import Summary from "./Summary"

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

import type { MobileSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
import type { RoomsAvailability } from "@/types/trpc/routers/hotel/roomAvailability"

export default function MobileSummary({
  isAllRoomsSelected,
  isUserLoggedIn,
  totalPriceToShow,
  showMemberDiscountBanner,
}: MobileSummaryProps) {
  const intl = useIntl()
  const scrollY = useRef(0)
  const [isSummaryOpen, setIsSummaryOpen] = useState(false)

  const { booking, bookingRooms, roomsAvailability, rateSummary, vat } =
    useRatesStore((state) => ({
      booking: state.booking,
      bookingRooms: state.booking.rooms,
      roomsAvailability: state.roomsAvailability,
      rateSummary: state.rateSummary,
      vat: state.vat,
    }))

  function toggleSummaryOpen() {
    setIsSummaryOpen(!isSummaryOpen)
  }

  useEffect(() => {
    if (isSummaryOpen) {
      scrollY.current = window.scrollY
      document.body.style.position = "fixed"
      document.body.style.top = `-${scrollY.current}px`
      document.body.style.width = "100%"
    } else {
      document.body.style.position = ""
      document.body.style.top = ""
      document.body.style.width = ""
      window.scrollTo({
        top: scrollY.current,
        left: 0,
        behavior: "instant",
      })
    }

    return () => {
      document.body.style.position = ""
      document.body.style.top = ""
    }
  }, [isSummaryOpen])

  const roomRateDefinitions = roomsAvailability?.find(
    (ra): ra is RoomsAvailability => "rateDefinitions" in ra
  )
  if (!roomRateDefinitions) {
    return null
  }

  const rooms = rateSummary.map((room, index) =>
    room ? mapRate(room, index, bookingRooms, room.packages) : null
  )

  const containsBookingCodeRate = rateSummary.find(
    (r) => r && isBookingCodeRate(r.product)
  )
  const showDiscounted = containsBookingCodeRate || isUserLoggedIn

  return (
    <>
      {isSummaryOpen && (
        <div
          className={styles.overlay}
          role="presentation"
          aria-hidden="true"
          onClick={toggleSummaryOpen}
        />
      )}
      {showMemberDiscountBanner ? (
        <div className={styles.signupPromoWrapper}>
          <SignupPromoMobile />
        </div>
      ) : null}
      <div className={styles.wrapper} data-open={isSummaryOpen}>
        <div className={styles.content}>
          <div className={styles.summaryAccordion}>
            <Summary
              booking={booking}
              rooms={rooms}
              isMember={isUserLoggedIn}
              totalPrice={totalPriceToShow}
              vat={vat}
              toggleSummaryOpen={toggleSummaryOpen}
            />
          </div>
        </div>
        <div className={styles.bottomSheet}>
          <button
            data-open={isSummaryOpen}
            onClick={(e) => {
              e.preventDefault()
              toggleSummaryOpen()
            }}
            className={styles.priceDetailsButton}
          >
            <Caption>
              {intl.formatMessage({
                defaultMessage: "Total price",
              })}
            </Caption>
            <Subtitle
              color={showDiscounted ? "red" : "uiTextHighContrast"}
              className={styles.wrappedText}
            >
              {formatPrice(
                intl,
                totalPriceToShow.local.price,
                totalPriceToShow.local.currency,
                totalPriceToShow.local.additionalPrice,
                totalPriceToShow.local.additionalPriceCurrency
              )}
            </Subtitle>
            <Caption color="baseTextHighContrast" type="underline">
              {intl.formatMessage({
                defaultMessage: "See details",
              })}
            </Caption>
          </button>
          <Button
            intent="primary"
            theme="base"
            size="large"
            type="submit"
            fullWidth
            disabled={!isAllRoomsSelected}
          >
            {intl.formatMessage({
              defaultMessage: "Continue",
            })}
          </Button>
        </div>
      </div>
    </>
  )
}
