"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { FormProvider, useForm } from "react-hook-form"

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

import Button from "../TempDesignSystem/Button"
import { bookingWidgetSchema } from "./schema"

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

import { type BookingWidgetSchema } from "@/types/components/bookingWidget"

export function BookingWidget() {
  const methods = useForm<BookingWidgetSchema>({
    defaultValues: {
      search: {
        stayType: "",
        stayValue: "",
      },
      nights: {
        // UTC is required to handle requests from far away timezones https://scandichotels.atlassian.net/browse/SWAP-6375 & PET-507
        // This is specifically to handle timezones falling in different dates.
        fromDate: dt().utc().format("DD/MM/YYYY"),
        toDate: dt().utc().add(1, "day").format("DD/MM/YYYY"),
      },
      bookingCode: "",
      redemption: false,
      voucher: false,
      rooms: [
        {
          adults: 1,
          childs: [],
        },
      ],
    },
    mode: "all",
    resolver: zodResolver(bookingWidgetSchema),
    reValidateMode: "onChange",
  })

  function onSubmit(data: BookingWidgetSchema) {
    console.log(data)
    // Parse data and route accordignly to Select hotel or select room-rate page
    console.log("to be routing")
  }

  return (
    <div id="booking-widget" className={styles.container}>
      <form onSubmit={methods.handleSubmit(onSubmit)} className={styles.form}>
        <FormProvider {...methods}>
          <div>Search</div>
          <div>Nights</div>
          <div>Rooms</div>
          <div>Bonus code</div>
          <div>Bonus cheque or reward nights</div>
          <Button type="submit">Search</Button>
        </FormProvider>
      </form>
    </div>
  )
}