import * as React from 'react';
import { CalendarIcon } from 'lucide-react';
import type { Matcher } from 'react-day-picker';

import { classNames } from '../../lib/utils';

import { Button } from './button';
import { Calendar } from './calendar';
import { Popover, PopoverContent, PopoverTrigger } from './popover';

interface DatePickerProps {
  /** Selected date, or undefined when unset. */
  value?: Date;
  /** Called with the picked date, or undefined when cleared. */
  onChange: (date?: Date) => void;
  placeholder?: string;
  /** Earliest selectable date (inclusive). */
  minDate?: Date;
  /** Latest selectable date (inclusive). */
  maxDate?: Date;
  className?: string;
  'aria-label'?: string;
}

/** Single-date picker — themed trigger button opening a calendar popover. */
function DatePicker({
  value,
  onChange,
  placeholder = 'Pick a date',
  minDate,
  maxDate,
  className,
  'aria-label': ariaLabel,
}: DatePickerProps) {
  const [open, setOpen] = React.useState(false);

  const disabled: Matcher[] = [];
  if (minDate) disabled.push({ before: minDate });
  if (maxDate) disabled.push({ after: maxDate });

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            aria-label={ariaLabel}
            className={classNames(
              'justify-start gap-1.5 font-normal',
              !value && 'text-text-muted',
              className
            )}
          />
        }
      >
        <CalendarIcon className="size-3.5 shrink-0 text-text-muted" />
        {value
          ? value.toLocaleDateString(undefined, {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
            })
          : placeholder}
      </PopoverTrigger>
      <PopoverContent align="start" className="w-auto p-0">
        <Calendar
          mode="single"
          selected={value}
          defaultMonth={value}
          disabled={disabled.length ? disabled : undefined}
          onSelect={date => {
            onChange(date);
            setOpen(false);
          }}
          autoFocus
        />
      </PopoverContent>
    </Popover>
  );
}

export { DatePicker };