import ClearIcon from "@mui/icons-material/Clear";
import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import { faIR } from "@mui/x-date-pickers/locales";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
import { parseISO } from "date-fns";

const parseIfString = (val) =>
    val instanceof Date ? val : typeof val === "string" && val !== "" ? parseISO(val) : null;

function MuiTimePicker({
    value,
    setFieldValue,
    views = ["hours", "minutes"],
    name,
    minTime,
    maxTime,
    helperText,
    placeholder,
    error,
    label,
}) {
    // Ensure value, minTime, maxTime are Date objects
    const parsedValue = parseIfString(value);
    const parsedMinTime = parseIfString(minTime);
    const parsedMaxTime = parseIfString(maxTime);

    return (
        <>
            <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
                <LocalizationProvider
                    dateAdapter={AdapterDateFnsJalali}
                    localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
                >
                    <MobileTimePicker
                        value={parsedValue}
                        sx={{ width: "100%" }}
                        id={name}
                        closeOnSelect
                        label={label}
                        format="HH:mm"
                        ampm={false}
                        timeSteps={{ hours: 1, minutes: 5 }}
                        views={views}
                        name={name}
                        onChange={(newValue) => {
                            setFieldValue(name, newValue);
                        }}
                        minTime={parsedMinTime}
                        maxTime={parsedMaxTime}
                        slotProps={{
                            textField: {
                                placeholder: placeholder,
                                size: "small",
                                error: error,
                                InputLabelProps: {
                                    shrink: true,
                                },
                                InputProps: {
                                    endAdornment: (
                                        <InputAdornment position="end">
                                            <IconButton
                                                size="small"
                                                onClick={(event) => {
                                                    event.stopPropagation();
                                                    setFieldValue(name, "");
                                                }}
                                                sx={{
                                                    color: "#bfbfbf",
                                                    "&:hover": {
                                                        backgroundColor: "rgba(189, 189, 189, 0.1)",
                                                        color: "#363434",
                                                    },
                                                }}
                                            >
                                                <ClearIcon />
                                            </IconButton>
                                        </InputAdornment>
                                    ),
                                },
                            },
                        }}
                    />
                </LocalizationProvider>
            </Box>
            {helperText && (
                <FormHelperText id="component-helper-text" sx={{ color: error ? "#d32f2f" : "unset", ml: 2 }}>
                    {helperText}
                </FormHelperText>
            )}
        </>
    );
}

export default MuiTimePicker;