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

function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperText, placeholder, error }) {
    // Ensure value, minTime, maxTime are Date objects
    const parsedValue = value ? (typeof value === "string" ? parseISO(value) : value) : null;
    const parsedMinTime = minTime ? (typeof minTime === "string" ? parseISO(minTime) : minTime) : null;
    const parsedMaxTime = maxTime && (typeof maxTime === "string" ? parseISO(maxTime) : null);

    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={helperText ? helperText : placeholder}
                    ampm={false}
                    timeSteps={{ hours: 1, minutes: 5 }}
                    views={["hours", "minutes"]}
                    name={name}
                    onChange={(newValue) => {
                        const formattedTime = newValue ? format(new Date(newValue), "HH:mm") : "";
                        setFieldValue(name, formattedTime);
                    }}
                    minTime={parsedMinTime}
                    maxTime={parsedMaxTime}
                    slotProps={{
                        textField: {
                            placeholder: placeholder,
                            size: "small",
                            error: error,
                            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>
                                ),
                            },
                        },
                    }}
                />
                <FormHelperText id="component-helper-text" sx={{ color: error ? "#d32f2f" : "unset" }}>
                    {helperText ? helperText : ""}
                </FormHelperText>
            </LocalizationProvider>
        </Box>
    );
}

export default MuiTimePicker;