"use client";

import {formSchema} from "@/schemas";
import {zodResolver} from "@hookform/resolvers/zod";
import {isSameDay, set} from "date-fns";
import {useState, useTransition} from "react";
import {Range} from "react-date-range";
import {useForm} from "react-hook-form";
import {toast} from "sonner";
import {z} from "zod";
import {Form} from "./ui/form";
import {Card, CardContent, CardFooter, CardHeader} from "./ui/card";
import {IoCalendarOutline, IoLockClosed} from "react-icons/io5";
import {PopoverClose} from "@radix-ui/react-popover";
import {X} from "lucide-react";
import CalendarWidget from "./calendar-widget";
import {FaRegUser} from "react-icons/fa";
import Counter from "./counter";
import {Button} from "./ui/button";
import {format, toZonedTime} from "date-fns-tz";
import {Popover, PopoverContent, PopoverTrigger} from "./ui/popover";
import {postAvailability} from "@/app/api/Actions";

const date = new Date();

const timeZone = "Asia/Jakarta";
const zonedDate = toZonedTime(date, timeZone);

interface Props {
  setDataAvailability: (value: any) => void;
  setIsSuccess: (value: boolean) => void;
  setDataBooking: (value: any) => void;
}

export default function SearchVillas({
  setDataAvailability,
  setIsSuccess,
  setDataBooking,
}: Props) {
  const [isPending, startTransition] = useTransition();

  const [openCalendar, setOpenCalendar] = useState(false);
  const [openGuest, setOpenGuest] = useState(false);

  const [openGuestForm, setOpenGuestForm] = useState(false);

  const [adult, setAdult] = useState(1);
  const [child, setChild] = useState(0);

  const [arrivalDate, setArrivalDate] = useState<Date>(new Date());
  const [departureDate, setDepartureDate] = useState<Date>(new Date());

  const [dateRange, setDateRange] = useState<Range>({
    startDate: zonedDate,
    endDate: zonedDate,
    key: "selection",
  });

  const [guest, setGuest] = useState<any>({
    adult: 1,
    child: 0,
  });

  const totalGuests = guest.adult + guest.child;

  const formSearch = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  });

  const handleDateChange = (value: any) => {
    setDateRange({
      startDate: value.selection.startDate,
      endDate: value.selection.endDate,
      key: "selection",
    });

    if (
      value.selection.startDate.toDateString() !==
      value.selection.endDate.toDateString()
    ) {
      setOpenCalendar(false);
      setOpenGuest(true);
      formSearch.setValue(
        "start",
        format(value.selection.startDate, "yyyy-MM-dd")
      );
      formSearch.setValue("end", format(value.selection.endDate, "yyyy-MM-dd"));
    }
  };

  const handleCounter = (value: number, name: string) => {
    if (name === "adult") {
      setGuest({
        adult: value,
        child: guest.child,
      });
      formSearch.setValue("adult", Number(value));
    }

    if (name === "child") {
      setGuest({
        adult: guest.adult,
        child: value,
      });
      formSearch.setValue("child", Number(value));
    }
  };

  const onSubmit = async (data: z.infer<typeof formSchema>) => {
    if (isSameDay(dateRange.startDate as Date, dateRange.endDate as Date)) {
      setOpenCalendar(true);
      return;
    } else {
      startTransition(async () => {
        const toastId = toast.loading("Checking available dates...");

        const response = await postAvailability(data);

        if (response.success) {
          setIsSuccess(true);
          setDataAvailability(response);
          setDataBooking(data);
          toast.success("Dates are available!", {
            id: toastId,
            duration: 1000,
          });
        } else {
          setIsSuccess(false);
          setDataAvailability([]);
          setDataBooking({});
          toast.custom(
            (t: any) => (
              <div className="flex justify-between p-4 min-w-[370px] gap-x-5 bg-white">
                <div className="text-start space-y-1">
                  <p className="text-xs text-main"></p>
                  <p className="text-sm text-main">{response.message}</p>
                </div>
                <button
                  type="button"
                  onClick={() => toast.dismiss(t)}
                  className="bg-main p-1 rounded h-fit"
                >
                  <X size={20} color="white" />
                </button>
              </div>
            ),
            {
              id: toastId,
              duration: 1000,
            }
          );
          setDateRange({
            startDate: arrivalDate,
            endDate: departureDate,
            key: "selection",
          });
          setGuest({
            adult: adult,
            child: child,
          });

          formSearch.setValue(
            "start",
            format(arrivalDate as Date, "yyyy-MM-dd")
          );
          formSearch.setValue(
            "end",
            format(departureDate as Date, "yyyy-MM-dd")
          );
          formSearch.setValue("adult", Number(adult));
          formSearch.setValue("child", Number(child));
        }
      });
    }
  };

  return (
    <div className="h-fit">
      <Form {...formSearch}>
        <form onSubmit={formSearch.handleSubmit(onSubmit)}>
          <Card className="border-[0.5px] border-main rounded-none">
            <CardHeader>
              <div className="flex items-center justify-between">
                <h1>Availability</h1>
              </div>
            </CardHeader>
            <CardContent className="flex flex-col lg:flex-row gap-5 ">
              <Popover open={openCalendar} onOpenChange={setOpenCalendar}>
                <PopoverTrigger
                  disabled={isPending}
                  className="w-full border-[0.5px] border-main px-5 py-2 h-[50px] text-main"
                >
                  <div className="flex items-center">
                    <IoCalendarOutline className="mr-3" />
                    <span className="text-base">
                      {dateRange.startDate?.toDateString() ===
                      dateRange.endDate?.toDateString()
                        ? "Check in - Check out"
                        : `${format(dateRange.startDate as Date, "MMM dd ", {
                            timeZone,
                          })} - ${format(
                            dateRange.endDate as Date,
                            "MMM dd, yyyy",
                            {timeZone}
                          )}`}
                    </span>
                  </div>
                </PopoverTrigger>
                <PopoverContent className="PopoverContent z-0" align="center">
                  <div className="flex justify-end">
                    <PopoverClose className="bg-main w-fit rounded">
                      <X className="w-5 h-5 rounded-[50px] text-white" />
                    </PopoverClose>
                  </div>
                  <CalendarWidget
                    value={dateRange}
                    onChange={handleDateChange}
                  />
                </PopoverContent>
              </Popover>

              <Popover open={openGuest} onOpenChange={setOpenGuest}>
                <PopoverTrigger
                  className="w-full border-[0.5px] border-main px-5 py-2 h-[50px] text-main"
                  disabled={isPending}
                >
                  <div className="flex items-center w-full">
                    <span className="mr-3">
                      <FaRegUser />
                    </span>
                    <span className="text-center">
                      {guest.adult + guest.child > 1
                        ? guest.adult + guest.child + " Guests"
                        : guest.adult + guest.child + " Guest"}
                    </span>
                  </div>
                </PopoverTrigger>
                <PopoverContent className="PopoverContent z-0" align="center">
                  <div className="flex justify-end">
                    <PopoverClose className="bg-main w-fit rounded">
                      <X className="w-5 h-5 rounded-[50px] text-white" />
                    </PopoverClose>
                  </div>
                  <div className="space-y-5 pt-5">
                    <Counter
                      title="Adult"
                      subtitle="Age 13 or Above"
                      value={guest.adult}
                      onChange={handleCounter}
                      action="adult"
                      disableLimit={1}
                      maxGuestLimit={6}
                      totalGuestCount={totalGuests}
                      className="!mb-0"
                      className2="bg-main text-white"
                      className3="items-center justify-between"
                    />
                    <Counter
                      title="Children"
                      subtitle="Age 2 to 12"
                      value={guest.child}
                      onChange={handleCounter}
                      action="child"
                      disableLimit={0}
                      maxGuestLimit={6}
                      totalGuestCount={totalGuests}
                      className="!mb-0"
                      className2="bg-main text-white"
                      className3="items-center justify-between"
                    />
                  </div>
                </PopoverContent>
              </Popover>
            </CardContent>
            <CardFooter>
              <Button
                type="submit"
                size={"lg"}
                className="w-full bg-main hover:bg-main/90 text-white flex items-center justify-center gap-2 disabled:cursor-not-allowed  rounded-none font-bold text-lg"
                // disabled={isPending}
                // onClick={() => setMessage("")}
              >
                {isPending ? <IoLockClosed /> : ""}
                Check Availability
              </Button>
            </CardFooter>
          </Card>
        </form>
      </Form>
    </div>
  );
}