'use client'
import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover'
import {Button} from './ui/button'
import {merge} from '@/lib/utils'
import {CalendarIcon} from 'lucide-react'
import {format} from 'date-fns'
import {Calendar} from './ui/calendar'

export type DatePickerProps = {
  className?: string
  onChange?: (date: Date | undefined) => void
  value?: Date
  disabled?: boolean
  required?: boolean
  placeholder?: string
  error?: boolean
  errorMessage?: string
  description?: string
  helperText?: string
  format?: string
}

export default function DatePicker(props: DatePickerProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          theme="outline"
          className={merge(
            'w-40 justify-start text-left font-normal h-9',
            !props.value && 'text-muted-foreground',
            props.disabled && 'cursor-not-allowed opacity-70',
            props.className,
          )}
        >
          <CalendarIcon/>
          <span className={merge(`text-sm`, !props.value && 'text-weak')}>
            {props.value
              ? format(props.value, props.format || 'yyyy-MM-dd HH:mm:ss')
              : props.placeholder || '选择日期'
            }
          </span>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="single"
          selected={props.value}
          onSelect={props.onChange}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  )
}
