import { LocalizationProvider, MobileDateTimePicker } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
import {Box, IconButton, FormControl, FormHelperText, InputAdornment, Stack} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";

export default function PickerWithButtonField({
                                                  formik,
                                                  name,
                                                  value,
                                                  error,
                                                  touched,
                                                  disabled,
                                              }) {
    return (
        <FormControl variant="outlined" fullWidth size="small" error={!!error}>
            <Stack sx={{width : "100%"}} direction={"row"}>
                <LocalizationProvider
                    dateAdapter={AdapterDateFnsJalali}
                    localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
                >
                    <MobileDateTimePicker
                        ampm={false}
                        disableFuture
                        value={value ? new Date(value) : null}
                        onChange={(newValue) => {
                            const formattedDate = moment(newValue).locale("en").format("YYYY-MM-DD HH:mm");
                            formik.setFieldValue(name, formattedDate);
                        }}
                        slotProps={{
                            textField: {
                                placeholder: name === "start_date"
                                    ? "تاریخ شروع را وارد کنید"
                                    : "تاریخ اتمام را وارد کنید",
                                variant: "outlined",
                                disabled,
                                fullWidth: true,
                                error: !!error,
                                helperText : touched && error ,
                                size: "small", // Ensure that the TextField is small
                                InputProps: {
                                    endAdornment: (
                                        <InputAdornment position="end">
                                            <IconButton
                                                size="small" // Set size="small" for IconButton
                                                onClick={() => formik.setFieldValue(name, null)}
                                            >
                                                <ClearIcon />
                                            </IconButton>
                                        </InputAdornment>
                                    ),
                                },
                            },
                        }}
                    />
                </LocalizationProvider>
            </Stack>
        </FormControl>
    );
}