import React from "react";

import { useTheme } from "@mui/material/styles";
import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
import {
  DatePicker as MuiDatePicker,
  DatePickerProps as MuiDatePickerProps,
} from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

import { DateTime } from "luxon";

export interface DatePickerProps extends MuiDatePickerProps<DateTime> {
  label: string;
  value?: DateTime;
  onChange?: (date: DateTime | null) => void;
}

const DatePicker = ({ label, value, onChange, sx, ...props }: DatePickerProps) => {
  const theme = useTheme();

  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <MuiDatePicker
        label={label}
        slotProps={{
          desktopPaper: {
            sx: {
              mt: 1,
            },
          },
        }}
        sx={{
          ".MuiInputBase-root": {
            fontWeight: 700,
            fontSize: "0.85rem",
            height: 44,
            maxWidth: 160,
            borderRadius: 999,
            pr: 2,
            backgroundColor: theme.palette.background.paper,
          },
          ...sx,
        }}
        value={value}
        onChange={onChange}
        {...props}
      />
    </LocalizationProvider>
  );
};

export default DatePicker;