import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import dayjs from 'dayjs';
import React, { useState } from 'react';
import './date-picker.scss';


export interface DatePickerProps<Tdate = any> extends MuiDatePickerProps<Tdate> {
    label?: string;
    defaultDate?: string;
    onChangeDate?: (date: any) => void;
}

export const DatePicker = ({ label, defaultDate, onChangeDate, ...rest }: DatePickerProps) => {
    const [selectedDate, setSelectedDate] = useState(defaultDate ? dayjs(defaultDate) : null);
    const handleDateChange = (newValue: any) => {
        setSelectedDate(newValue);
    };
    React.useEffect(() => {
        if (onChangeDate) {
            onChangeDate(selectedDate)
        }
    }, [selectedDate]);
    return (
        <div className="date-picker">
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <MuiDatePicker
                    value={selectedDate}
                    onChange={handleDateChange}
                    {...rest}
                />
            </LocalizationProvider>
        </div>
    );
}