"use client"
import {
  Button as ButtonRAC,
  Dialog,
  DialogTrigger,
} from "react-aria-components"
import { useFormContext, useWatch } from "react-hook-form"
import { useIntl } from "react-intl"

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

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

import DatePickerSingleDesktop from "@/components/DatePicker/Single/Desktop"
import DatePickerSingleMobile from "@/components/DatePicker/Single/Mobile"
import Modal from "@/components/HotelReservation/MyStay/Modal"
import useLang from "@/hooks/useLang"

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

interface NewDatesProps {
  checkInDate: Date
  checkOutDate: Date
}

export default function NewDates({ checkInDate, checkOutDate }: NewDatesProps) {
  const intl = useIntl()
  const lang = useLang()

  const { setValue } = useFormContext()

  // Calculate default number of days between check-in and check-out
  const defaultDaysBetween = dt(checkOutDate)
    .startOf("day")
    .diff(dt(checkInDate).startOf("day"), "days")

  const fromDate = useWatch({ name: "checkInDate" })
  const toDate = useWatch({ name: "checkOutDate" })

  function handleSelectDate(date: Date, name: "checkInDate" | "checkOutDate") {
    setValue(name, dt(date).format("YYYY-MM-DD"))
  }

  function handleSelectCheckInDate(checkIn: Date) {
    handleSelectDate(checkIn, "checkInDate")
    if (dt(checkIn).isSameOrAfter(toDate)) {
      handleSelectDate(
        dt(checkIn).add(defaultDaysBetween, "days").toDate(),
        "checkOutDate"
      )
    }
  }

  function handleSelectCheckOutDate(checkOut: Date) {
    handleSelectDate(checkOut, "checkOutDate")
    if (dt(checkOut).isSameOrBefore(fromDate)) {
      handleSelectDate(
        dt(checkOut).subtract(defaultDaysBetween, "days").toDate(),
        "checkInDate"
      )
    }
  }

  const checkInLabel = intl.formatMessage({ defaultMessage: "Check-in" })
  const checkOutLabel = intl.formatMessage({ defaultMessage: "Check-out" })

  const checkInText = dt(fromDate).locale(lang).format("dddd, DD MMM, YYYY")
  const checkOutText = dt(toDate).locale(lang).format("dddd, DD MMM, YYYY")
  return (
    <>
      <div className={styles.container}>
        <div className={styles.checkInDate}>
          <Typography variant="Body/Supporting text (caption)/smBold">
            <span className={styles.textDefault}>{checkInLabel}</span>
          </Typography>

          <DialogTrigger>
            <ButtonRAC className={styles.trigger}>
              <Typography variant="Body/Paragraph/mdRegular">
                <span>{checkInText}</span>
              </Typography>
              <MaterialIcon icon="calendar_today" />
            </ButtonRAC>
            <Modal>
              <Dialog>
                {({ close }) => (
                  <>
                    <DatePickerSingleDesktop
                      close={close}
                      handleOnSelect={handleSelectCheckInDate}
                      selectedDate={fromDate}
                      startMonth={fromDate}
                    />
                    <DatePickerSingleMobile
                      close={close}
                      handleOnSelect={handleSelectCheckInDate}
                      hideHeader
                      selectedDate={fromDate}
                    />
                  </>
                )}
              </Dialog>
            </Modal>
          </DialogTrigger>
        </div>

        <div className={styles.checkOutDate}>
          <Typography variant="Body/Supporting text (caption)/smBold">
            <span className={styles.textDefault}>{checkOutLabel}</span>
          </Typography>

          <DialogTrigger>
            <ButtonRAC className={styles.trigger}>
              <Typography variant="Body/Paragraph/mdRegular">
                <span>{checkOutText}</span>
              </Typography>
              <MaterialIcon icon="calendar_today" />
            </ButtonRAC>
            <Modal>
              <Dialog>
                {({ close }) => (
                  <>
                    <DatePickerSingleDesktop
                      close={close}
                      handleOnSelect={handleSelectCheckOutDate}
                      selectedDate={toDate}
                      startMonth={toDate}
                    />
                    <DatePickerSingleMobile
                      close={close}
                      handleOnSelect={handleSelectCheckOutDate}
                      hideHeader
                      selectedDate={toDate}
                    />
                  </>
                )}
              </Dialog>
            </Modal>
          </DialogTrigger>
        </div>
      </div>
    </>
  )
}
