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

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

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

import FormContent from "./FormContent"
import { bookingWidgetSchema } from "./schema"

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

import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidget"
import type { Location } from "@/types/trpc/routers/hotel/locations"

const formId = "booking-widget"

export default function Form({ locations }: BookingWidgetFormProps) {
  const intl = useIntl()
  const router = useRouter()

  const sessionStorageSearchData =
    typeof window !== "undefined"
      ? sessionStorage.getItem("searchData")
      : undefined
  const initialSelectedLocation: Location | undefined = sessionStorageSearchData
    ? JSON.parse(sessionStorageSearchData)
    : undefined
  const methods = useForm<BookingWidgetSchema>({
    defaultValues: {
      search: initialSelectedLocation?.name ?? "",
      location: sessionStorageSearchData
        ? encodeURIComponent(sessionStorageSearchData)
        : undefined,
      date: {
        // 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.
        from: dt().utc().format("YYYY-MM-DD"),
        to: dt().utc().add(1, "day").format("YYYY-MM-DD"),
      },
      bookingCode: "",
      redemption: false,
      voucher: false,
      rooms: [
        {
          adults: 1,
          childs: [],
        },
      ],
    },
    shouldFocusError: false,
    mode: "all",
    resolver: zodResolver(bookingWidgetSchema),
    reValidateMode: "onChange",
  })

  function onSubmit(data: BookingWidgetSchema) {
    data.location = JSON.parse(decodeURIComponent(data.location))
    console.log(data)
    // TODO: Parse data and route accordignly to Select hotel or select room-rate page
    console.log("to be routing")
    router.push("/en/hotelreservation/select-hotel")
  }

  return (
    <section className={styles.section}>
      <form
        onSubmit={methods.handleSubmit(onSubmit)}
        className={styles.form}
        id={formId}
      >
        <FormProvider {...methods}>
          <input {...methods.register("location")} type="hidden" />
          <FormContent locations={locations} />
        </FormProvider>
      </form>
      <Button
        type="submit"
        form={formId}
        size="small"
        theme="base"
        intent="primary"
        className={styles.button}
      >
        <Caption color="white" textTransform="bold">
          {intl.formatMessage({ id: "Find hotels" })}
        </Caption>
      </Button>
    </section>
  )
}
