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

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

import DatePicker from "@/components/DatePicker"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import Search from "./Search"

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

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

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

  const rooms = intl.formatMessage({ id: "Rooms & Guests" })
  const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
  const reward = intl.formatMessage({ id: "Book reward night" })

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

  return (
    <div className={styles.input}>
      <div className={styles.where}>
        <Search locations={locations} />
      </div>
      <div className={styles.when}>
        <Caption color="red" textTransform="bold">
          {nights}{" "}
          {nights > 1
            ? intl.formatMessage({ id: "nights" })
            : intl.formatMessage({ id: "night" })}
        </Caption>
        <DatePicker />
      </div>
      <div className={styles.rooms}>
        <Caption color="red" textTransform="bold">
          {rooms}
        </Caption>
        <input type="text" placeholder={rooms} />
      </div>
      <div className={styles.vouchers}>
        <Caption color="textMediumContrast" textTransform="bold">
          {vouchers}
        </Caption>
        <input type="text" placeholder={vouchers} />
      </div>
      <div className={styles.options}>
        <div className={styles.option}>
          <input type="checkbox" />
          <Caption color="textMediumContrast">{bonus}</Caption>
        </div>
        <div className={styles.option}>
          <input type="checkbox" />
          <Caption color="textMediumContrast">{reward}</Caption>
        </div>
      </div>
    </div>
  )
}