"use client" import { useEffect, useState } from "react" import { useWatch } from "react-hook-form" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import { EditIcon, SearchIcon } from "@/components/Icons" import Divider from "@/components/TempDesignSystem/Divider" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import useLang from "@/hooks/useLang" import styles from "./button.module.css" import type { BookingWidgetSchema, BookingWidgetToggleButtonProps, } from "@/types/components/bookingWidget" import type { Location } from "@/types/trpc/routers/hotel/locations" export default function MobileToggleButton({ openMobileSearch, }: BookingWidgetToggleButtonProps) { const [hasMounted, setHasMounted] = useState(false) const intl = useIntl() const lang = useLang() const d = useWatch({ name: "date" }) const location = useWatch({ name: "location" }) const rooms: BookingWidgetSchema["rooms"] = useWatch({ name: "rooms" }) const parsedLocation: Location | null = location ? JSON.parse(decodeURIComponent(location)) : null const nights = dt(d.to).diff(dt(d.from), "days") const selectedFromDate = dt(d.from).locale(lang).format("D MMM") const selectedToDate = dt(d.to).locale(lang).format("D MMM") useEffect(() => { setHasMounted(true) }, []) if (!hasMounted) { return null } if (parsedLocation && d) { const totalRooms = rooms.length const totalAdults = rooms.reduce((acc, room) => { if (room.adults) { acc = acc + room.adults } return acc }, 0) return (

{parsedLocation.name} {`${selectedFromDate} - ${selectedToDate} (${intl.formatMessage( { id: "booking.nights" }, { totalNights: nights } )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}

) } return (

{intl.formatMessage({ id: "Where to" })} {parsedLocation ? parsedLocation.name : intl.formatMessage({ id: "Destination" })}

{intl.formatMessage( { id: "booking.nights" }, { totalNights: nights } )} {selectedFromDate} - {selectedToDate}

) }