import CalendarIcon from "@icons/CalendarIcon";
import {
  Typography,
  Box,
  SxProps,
  Theme,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import type { Moment } from "moment";

interface Props {
  label?: string;
  sx?: SxProps<Theme>;
  sxIcon?: SxProps<Theme>;
  sxDate?: SxProps<Theme>;
  value?: Moment | null;
  onChange?: (value: string | null) => void;
  className?: string;
}

export default function LabeledDatePicker({
  label,
  value = moment(),
  onChange,
  sx,
  sxIcon,
  sxDate,
  className,
}: Props) {
  const theme = useTheme();
  const upLg = useMediaQuery(theme.breakpoints.up("md"));

  return (
    <Box
      sx={{
        ...sx,
      }}
    >
      {label && (
        <Typography
          sx={{
            fontWeight: 500,
            fontSize: "16px",
            lineHeight: "20px",
            color: "#4D4D4D",
            mb: "10px",
          }}
        >
          {label}
        </Typography>
      )}
      <DatePicker
        className={className || ""}
        value={String(value.toDate())}
        onChange={onChange}
        slots={{
          openPickerIcon: () => <CalendarIcon sx={sxIcon} />,
        }}
        slotProps={{
          openPickerButton: {
            sx: {
              p: 0,
            },
            "data-cy": "open-datepicker",
          },
          layout: {
            sx: { backgroundColor: theme.palette.background.default },
          },
        }}
        sx={{
          "& .MuiInputBase-root": {
            backgroundColor: "#F2F3F7",
            borderRadius: "10px",
            pr: "22px",
            "& input": {
              py: "11px",
              pl: "20px",
              lineHeight: "19px",
            },
            "& fieldset": {
              borderColor: "#9A9AAF",
            },
          },
          ...sxDate,
        }}
      />
    </Box>
  );
}
