import React from 'react'
import dayjs, { Dayjs } from 'dayjs'
import TextField from '@mui/material/TextField'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { DatePicker as MUIDatePicker } from '@mui/x-date-pickers/DatePicker'

interface DatePickerProps {
  label: string
  defaultValue?: Date
  onChange: (date: Date | null) => void
}

function DatePicker({ label, defaultValue, onChange }: DatePickerProps) {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs(defaultValue))

  const handleChange = (date: Dayjs | null) => {
    if (date) {
      const jsDate = date.toDate()
      onChange(jsDate)
      setValue(date)
    } else {
      onChange(null)
      setValue(null)
    }
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <MUIDatePicker
        label={label}
        value={value}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  )
}

export default DatePicker