import { FormControl, FormHelperText } from "@mui/material";
import Button from "@mui/material/Button";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { faIR } from "@mui/x-date-pickers/locales";
import moment from "jalali-moment";
import { useTranslations } from "next-intl";
import { useState } from "react";

function ButtonField(props) {
    const t = useTranslations();
    const {
        setOpen,
        label,
        id,
        disabled,
        InputProps: { ref } = {},
        inputProps: { "aria-label": ariaLabel } = {},
    } = props;

    return (
        <Button
            sx={{ width: "100%", padding: 0.8 }}
            variant="outlined"
            color={
                props.slotProps.formik.touched.company_register_date &&
                Boolean(props.slotProps.formik.errors.company_register_date)
                    ? "error"
                    : "primary"
            }
            id={id}
            disabled={disabled}
            ref={ref}
            aria-label={ariaLabel}
            onClick={() => setOpen?.((prev) => !prev)}
        >
            {label ? `${t("company_date")}: ${label}` : `${t("company_date")}`}
        </Button>
    );
}

function ButtonDatePicker(props) {
    const t = useTranslations();
    const [open, setOpen] = useState(false);
    return (
        <DatePicker
            slots={{ field: ButtonField, ...props.slots }}
            disabled={props.disabled}
            slotProps={{
                formik: props.formik,
                field: { setOpen },
                textField: {
                    helperText: props.formik.errors.company_register_date ? `${t("company_date")}` : null,
                },
            }}
            {...props}
            open={open}
            disableFuture
            onClose={() => setOpen(false)}
            onOpen={() => setOpen(true)}
        />
    );
}

const LegalPersonDatePicker = ({ formik, disabled }) => {
    return (
        <FormControl variant={"outlined"} fullWidth size="small" error={true}>
            <LocalizationProvider
                dateAdapter={AdapterDateFnsJalali}
                localeText={{
                    ...faIR.components.MuiLocalizationProvider.defaultProps.localeText,
                    okButtonLabel: "تایید",
                }}
            >
                <ButtonDatePicker
                    label={
                        formik.values.company_register_date !== "" &&
                        formik.values.company_register_date?.locale("fa").format("YYYY/MM/DD")
                    }
                    value={
                        formik.values.company_register_date !== ""
                            ? formik.values.company_register_date?.toDate()
                            : null
                    }
                    formik={formik}
                    disabled={disabled}
                    onChange={(newValue) => {
                        formik.setFieldValue("company_register_date", moment(newValue));
                    }}
                />
            </LocalizationProvider>
            <FormHelperText>
                {formik.touched.company_register_date && formik.errors.company_register_date}
            </FormHelperText>
        </FormControl>
    );
};
export default LegalPersonDatePicker;