"use client";

import * as React from "react";
import {
  Alert,
  AlertIcon,
  AlertTitle,
} from "@/components/ui/alert/radix";
import { Button } from "@/components/ui/button/radix";
import { Calendar } from "@/components/ui/calendar";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { zodResolver } from "@hookform/resolvers/zod";
import { RiCheckboxCircleFill } from "@remixicon/react";
import { format } from "date-fns";
import { Calendar as CalendarIcon, X } from "lucide-react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";

// Define the schema with Zod
const FormSchema = z.object({
  singleDate: z
    .string()
    .nonempty({ message: "Date is required." })
    .refine((val) => !isNaN(Date.parse(val)), {
      message: "Please select a valid date.",
    }),
  rangeDate: z
    .object({
      from: z.string().optional(),
      to: z.string().optional(),
    })
    .optional()
    .refine(
      (val) =>
        !val ||
        (!val.from && !val.to) ||
        (val.from &&
          val.to &&
          !isNaN(Date.parse(val.from)) &&
          !isNaN(Date.parse(val.to))),
      {
        message: "Please select a valid date range.",
        path: ["rangeDate"],
      },
    ),
});

export default function CombinedDatePickerForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      singleDate: "",
      rangeDate: { from: "", to: "" },
    },
  });

  const onSubmit = (data: z.infer<typeof FormSchema>) => {
    const message = [];
    if (data.singleDate) {
      message.push(`Single date: ${format(new Date(data.singleDate), "PPP")}`);
    }
    if (data.rangeDate?.from && data.rangeDate?.to) {
      message.push(
        `Range: ${format(new Date(data.rangeDate.from), "PPP")} - ${format(new Date(data.rangeDate.to), "PPP")}`,
      );
    }
    const finalMessage =
      message.length > 0 ? message.join(" | ") : "No dates selected";

    toast.custom((t) => (
      <Alert variant="info" icon="primary" onClose={() => toast.dismiss(t)}>
        <AlertIcon>
          <RiCheckboxCircleFill />
        </AlertIcon>
        <AlertTitle>{finalMessage}</AlertTitle>
      </Alert>
    ));
  };

  const handleReset = () => {
    form.reset();
  };

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="w-[300px] space-y-6"
      >
        <FormField
          control={form.control}
          name="singleDate"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Single Date:</FormLabel>
              <FormControl>
                <Popover>
                  <PopoverTrigger asChild>
                    <div className="relative">
                      <Button
                        type="button"
                        variant="outline"
                        // mode="input"
                        // placeholder={!field.value}
                        className="w-full"
                      >
                        <CalendarIcon />
                        {field.value ? (
                          format(new Date(field.value), "dd MMM, yyyy")
                        ) : (
                          <span>Pick a date</span>
                        )}
                      </Button>
                      {field.value && (
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          className="absolute top-1/2 -end-0 -translate-y-1/2"
                          onClick={(e) => {
                            e.preventDefault();
                            form.setValue("singleDate", "", {
                              shouldValidate: true,
                            });
                          }}
                        >
                          <X />
                        </Button>
                      )}
                    </div>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0" align="start">
                    <Calendar
                      mode="single"
                      selected={field.value ? new Date(field.value) : undefined}
                      onSelect={(date) =>
                        form.setValue("singleDate", date?.toISOString() || "", {
                          shouldValidate: true,
                        })
                      }
                      autoFocus
                    />
                  </PopoverContent>
                </Popover>
              </FormControl>
              <FormDescription>
                Enter your single date to proceed
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="rangeDate"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Date Range:</FormLabel>
              <FormControl>
                <Popover>
                  <PopoverTrigger asChild>
                    <div className="relative">
                      <Button
                        variant="outline"
                        // mode="input"
                        // placeholder={!field.value?.from && !field.value?.to}
                        className="w-full"
                      >
                        <CalendarIcon />
                        {field.value?.from ? (
                          field.value.to ? (
                            `${format(new Date(field.value.from), "dd MMM, yyyy")} - ${format(new Date(field.value.to), "dd MMM, yyyy")}`
                          ) : (
                            format(new Date(field.value.from), "dd MMM, yyyy")
                          )
                        ) : (
                          <span>Pick a date range</span>
                        )}
                      </Button>
                      {field.value?.from && (
                        <Button
                          variant="outline"
                          size="sm"
                          className="absolute top-1/2 -end-0 -translate-y-1/2"
                          onClick={(e) => {
                            e.preventDefault();
                            form.setValue(
                              "rangeDate",
                              { from: "", to: "" },
                              { shouldValidate: true },
                            );
                          }}
                        >
                          <X />
                        </Button>
                      )}
                    </div>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0" align="start">
                    <Calendar
                      mode="range"
                      selected={
                        field.value?.from && field.value?.to
                          ? {
                              from: new Date(field.value.from),
                              to: new Date(field.value.to),
                            }
                          : undefined
                      }
                      onSelect={(range) =>
                        form.setValue(
                          "rangeDate",
                          {
                            from: range?.from?.toISOString() || "",
                            to: range?.to?.toISOString() || "",
                          },
                          { shouldValidate: true },
                        )
                      }
                      numberOfMonths={2}
                      autoFocus
                    />
                  </PopoverContent>
                </Popover>
              </FormControl>
              <FormDescription>
                Enter your date range to proceed
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

        <div className="flex items-center justify-end gap-2.5">
          <Button type="button" variant="outline" onClick={handleReset}>
            Reset
          </Button>
          <Button type="submit">Submit</Button>
        </div>
      </form>
    </Form>
  );
}
Date Picker Pattern

Date Time

Default

Form

Presets

Range

We use cookies
