"use client"

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

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

import { dt } from "@/lib/dt"

import SkeletonShimmer from "@/components/SkeletonShimmer"
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 isValidJson from "@/utils/isValidJson"

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 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 && isValidJson(location)
      ? JSON.parse(decodeURIComponent(location))
      : null

  const selectedFromDate = dt(d.fromDate).locale(lang).format("D MMM")
  const selectedToDate = dt(d.toDate).locale(lang).format("D MMM")

  const locationAndDateIsSet = parsedLocation && d

  const totalNights = dt(d.toDate).diff(dt(d.fromDate), "days")
  const totalRooms = rooms.length
  const totalAdults = rooms.reduce((acc, room) => {
    if (room.adults) {
      acc = acc + room.adults
    }
    return acc
  }, 0)
  const totalChildren = rooms.reduce((acc, room) => {
    if (room.childrenInRoom) {
      acc = acc + room.childrenInRoom.length
    }
    return acc
  }, 0)

  const totalNightsMsg = intl.formatMessage(
    { id: "{totalNights, plural, one {# night} other {# nights}}" },
    { totalNights }
  )

  const totalAdultsMsg = intl.formatMessage(
    { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
    { totalAdults }
  )

  const totalChildrenMsg = intl.formatMessage(
    { id: "{totalChildren, plural, one {# child} other {# children}}" },
    { totalChildren }
  )

  const totalRoomsMsg = intl.formatMessage(
    { id: "{totalRooms, plural, one {# room} other {# rooms}}" },
    { totalRooms }
  )

  const totalDetails = [totalAdultsMsg]
  if (totalChildren > 0) {
    totalDetails.push(totalChildrenMsg)
  }
  totalDetails.push(totalRoomsMsg)

  return (
    <div
      className={locationAndDateIsSet ? styles.complete : styles.partial}
      onClick={openMobileSearch}
      role="button"
    >
      {!locationAndDateIsSet && (
        <>
          <div>
            <Caption type="bold" color="red">
              {intl.formatMessage({ id: "Where to?" })}
            </Caption>
            <Body color="uiTextPlaceholder">
              {parsedLocation
                ? parsedLocation.name
                : intl.formatMessage({ id: "Destination" })}
            </Body>
          </div>
          <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
          <div>
            <Caption type="bold" color="red">
              {totalNightsMsg}
            </Caption>
            <Body>
              {intl.formatMessage(
                { id: "{selectedFromDate} - {selectedToDate}" },
                {
                  selectedFromDate,
                  selectedToDate,
                }
              )}
            </Body>
          </div>
          <div className={styles.icon}>
            <MaterialIcon icon="search" color="Icon/Inverted" />
          </div>
        </>
      )}

      {locationAndDateIsSet && (
        <>
          <div>
            <Caption color="red">{parsedLocation?.name}</Caption>
            <Caption>
              {intl.formatMessage(
                {
                  id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
                },
                {
                  selectedFromDate,
                  selectedToDate,
                  totalNights: totalNightsMsg,
                  details: totalDetails.join(", "),
                }
              )}
            </Caption>
          </div>
          <div className={styles.icon}>
            <MaterialIcon icon="edit_square" color="Icon/Inverted" />
          </div>
        </>
      )}
    </div>
  )
}

export function MobileToggleButtonSkeleton() {
  const intl = useIntl()

  return (
    <div className={styles.partial}>
      <div>
        <Caption type="bold" color="red">
          {intl.formatMessage({ id: "Where to?" })}
        </Caption>
        <SkeletonShimmer height="24px" />
      </div>
      <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
      <div>
        <Caption type="bold" color="red">
          {intl.formatMessage(
            { id: "{totalNights, plural, one {# night} other {# nights}}" },
            { totalNights: 0 }
          )}
        </Caption>
        <SkeletonShimmer height="24px" />
      </div>
      <div className={styles.icon}>
        <MaterialIcon icon="search" color="Icon/Inverted" />
      </div>
    </div>
  )
}
