import { format } from 'date-fns'
import { Calendar as CalendarIcon } from 'lucide-react'
import { Button } from './ui/button'
import { Calendar } from './ui/calendar'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from './ui/popover'

type DatePickerProps = {
  selected: Date | undefined
  onSelect: (date: Date | undefined) => void
  placeholder?: string
  className?: string
  buttonClassName?: string
  disabled?: boolean | ((date: Date) => boolean)
  minDate?: Date
  maxDate?: Date
}

export function DatePicker({
  selected,
  onSelect,
  placeholder = 'Pick a date',
  className,
  buttonClassName,
  disabled,
  minDate,
  maxDate,
}: DatePickerProps) {
  const isDisabled = typeof disabled === 'boolean' ? disabled : undefined
  const disabledDates = typeof disabled === 'function' ? disabled : undefined
  const triggerClassName = [
    'w-[240px] justify-start text-start font-normal data-[empty=true]:text-muted-foreground',
    className ?? '',
    buttonClassName ?? '',
  ]
    .join(' ')
    .trim()

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant='outline'
          data-empty={!selected}
          className={triggerClassName}
          disabled={isDisabled}
        >
          {selected ? (
            format(selected, 'dd-MMM-yyyy')
          ) : (
            <span>{placeholder}</span>
          )}
          <CalendarIcon className='ms-auto h-4 w-4 opacity-50' />
        </Button>
      </PopoverTrigger>
      <PopoverContent className='w-auto p-0'>
        <Calendar
          mode='single'
          captionLayout='dropdown'
          selected={selected}
          onSelect={onSelect}
          disabled={
            disabledDates ??
            ((date: Date) => {
              if (minDate && date < minDate) return true
              if (maxDate && date > maxDate) return true

              return date < new Date('1900-01-01')
            })
          }
        />
      </PopoverContent>
    </Popover>
  )
}