"use client";
import * as React from "react";
import * as Popover from "@radix-ui/react-popover";
import { AnimatePresence, motion } from "motion/react";
import { addDays, format } from "date-fns";
import type { DateRange } from "react-day-picker";
import { CalendarBlankIcon, CalendarDotsIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";

/** Popover that pops in with springs.bouncy. Uses Radix directly so this demo stands alone. */
function Pop({ trigger, children }: { trigger: React.ReactNode; children: (close: () => void) => React.ReactNode }) {
  const [open, setOpen] = React.useState(false);
  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
      <AnimatePresence>
        {open && (
          <Popover.Portal forceMount>
            <Popover.Content forceMount asChild align="start" sideOffset={10} className="z-50">
              <motion.div
                initial={{ opacity: 0, scale: 0.9, y: -6 }}
                animate={{ opacity: 1, scale: 1, y: 0, transition: springs.bouncy }}
                exit={{ opacity: 0, scale: 0.96, transition: { duration: 0.13 } }}
                style={{ transformOrigin: "var(--radix-popover-content-transform-origin)" }}
              >
                {children(() => setOpen(false))}
              </motion.div>
            </Popover.Content>
          </Popover.Portal>
        )}
      </AnimatePresence>
    </Popover.Root>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-2">
      <span className="text-sm font-bold">{label}</span>
      {children}
    </div>
  );
}

export default function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>();
  const [range, setRange] = React.useState<DateRange | undefined>(() => ({ from: new Date(), to: addDays(new Date(), 6) }));

  return (
    <div className="flex flex-wrap items-start gap-8">
      <Field label="Hearing date">
        <Pop
          trigger={
            <Button variant="soft" color="neutral" className={cn("w-64 justify-start", !date && "text-on-surface-muted")}>
              <CalendarBlankIcon weight="bold" />
              {date ? format(date, "PPP") : "Pick a date"}
            </Button>
          }
        >
          {(close) => (
            <Calendar
              mode="single"
              selected={date}
              onSelect={(d) => {
                setDate(d);
                if (d) close();
              }}
              autoFocus
            />
          )}
        </Pop>
      </Field>

      <Field label="Committee visit">
        <Pop
          trigger={
            <Button variant="soft" color="neutral" className={cn("w-72 justify-start", !range?.from && "text-on-surface-muted")}>
              <CalendarDotsIcon weight="bold" />
              {range?.from ? (range.to ? `${format(range.from, "d LLL")} to ${format(range.to, "d LLL y")}` : format(range.from, "d LLL y")) : "Pick a range"}
            </Button>
          }
        >
          {() => <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} defaultMonth={range?.from} autoFocus />}
        </Pop>
      </Field>
    </div>
  );
}
Installation
