import CalendarIcon from "@icons/CalendarIcon";
import { Box, SxProps, Theme, Typography, useTheme } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import moment from "moment";
import { useRootContainerSize } from "../contexts/RootContainerWidthContext";

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

export default function LabeledDatePicker({ label, value = moment(), onChange, sx }: Props) {
    const theme = useTheme();
    const upLg = useRootContainerSize() > theme.breakpoints.values.md;

    return (
        <Box
            sx={{
                ...sx,
            }}
        >
            {label && (
                <Typography
                    sx={{
                        fontWeight: 500,
                        fontSize: "16px",
                        lineHeight: "20px",
                        color: "#4D4D4D",
                        mb: "10px",
                    }}
                >
                    {label}
                </Typography>
            )}
            <DatePicker
                //@ts-ignore
                value={value._d}
                onChange={onChange}
                slots={{
                    openPickerIcon: () => <CalendarIcon />,
                }}
                slotProps={{
                    openPickerButton: {
                        sx: {
                            p: 0,
                        },
                        "data-cy": "open-datepicker",
                    },
                }}
                sx={{
                    "& .MuiInputBase-root": {
                        backgroundColor: "#F2F3F7",
                        borderRadius: "10px",
                        pr: "22px",
                        "& input": {
                            py: "11px",
                            pl: upLg ? "20px" : "13px",
                            lineHeight: "19px",
                        },
                        "& fieldset": {
                            borderColor: "#9A9AAF",
                        },
                    },
                }}
            />
        </Box>
    );
}