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

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

import DatePicker from "@/components/DatePicker"
import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
import { SearchIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import Search from "./Search"
import Voucher from "./Voucher"

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

import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"

export default function FormContent({
  locations,
  formId,
}: BookingWidgetFormContentProps) {
  const intl = useIntl()
  const selectedDate = useWatch({ name: "date" })

  const rooms = intl.formatMessage({ id: "Guests & Rooms" })

  const nights = dt(selectedDate.to).diff(dt(selectedDate.from), "days")

  return (
    <>
      <div className={styles.input}>
        <div className={styles.inputContainer}>
          <div className={styles.where}>
            <Search locations={locations} />
          </div>
          <div className={styles.when}>
            <Caption color="red" textTransform="bold">
              {intl.formatMessage(
                { id: "booking.nights" },
                { totalNights: nights > 0 ? nights : 0 }
              )}
            </Caption>
            <DatePicker />
          </div>
          <div className={styles.rooms}>
            <label>
              <Caption color="red" textTransform="bold">
                {rooms}
              </Caption>
            </label>
            <GuestsRoomsPickerForm />
          </div>
        </div>
        <div className={styles.voucherContainer}>
          <Voucher />
        </div>
        <div className={styles.buttonContainer}>
          <Button
            className={styles.button}
            form={formId}
            intent="primary"
            theme="base"
            type="submit"
          >
            <Caption
              color="white"
              textTransform="bold"
              className={styles.buttonText}
            >
              {intl.formatMessage({ id: "Search" })}
            </Caption>
            <div className={styles.icon}>
              <SearchIcon color="white" width={28} height={28} />
            </div>
          </Button>
        </div>
      </div>
      <div className={styles.voucherRow}>
        <Voucher />
      </div>
    </>
  )
}