import {useTranslations} from "next-intl";
import {Button, DialogActions, DialogContent, IconButton, InputAdornment, TextField} from "@mui/material";
import {CHANGE_PASSWORD_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
import {useFormik} from "formik";
import * as Yup from "yup";
import {Visibility, VisibilityOff} from "@mui/icons-material";
import {useState} from "react";
import useRequest from "@/lib/app/hooks/useRequest";


const ChnagePasswordContent = ({rowId, mutate, setOpenChangePasswordDialog}) => {
    const t = useTranslations();
    const requestServer = useRequest();
    const [showPassword, setShowPassword] = useState(false);

    const handleClickShowPassword = () => {
        setShowPassword(!showPassword);
    };

    const validationSchema = Yup.object().shape({
        new_password: Yup.string()
            .required(t("ExpertMangement.error_message_new_password"))
            .matches(
                /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
                t("ExpertMangement.error_message_new_password_regex")
            ),
    });

    const formik = useFormik({
        initialValues: {
            new_password: "",
        },
        validationSchema,
        onSubmit: (values, {setSubmitting}) => {
            const formData = new FormData();
            formData.append("new_password", values.new_password);

            requestServer(`${CHANGE_PASSWORD_EXPERT_MANAGEMENT}/${rowId}`, 'post', {
                auth: true,
                data: formData
            })
                .then((response) => {
                    setOpenChangePasswordDialog(false)
                    mutate()
                }).catch(() => {
            }).finally(() => {
                setSubmitting(false);
            });
        },
    });

    return (
        <>
            <DialogContent>
                <TextField
                    name="new_password"
                    label={t("ExpertMangement.text_field_new_password")}
                    variant="outlined"
                    margin="normal"
                    size="small"
                    value={formik.values.new_password}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.new_password && !!formik.errors.new_password}
                    helperText={formik.touched.new_password && formik.errors.new_password ? formik.errors.new_password : null}
                    type={showPassword ? "text" : "password"}
                    InputProps={{
                        endAdornment: (
                            <InputAdornment position="end">
                                <IconButton onClick={handleClickShowPassword}>
                                    {showPassword ? <Visibility/> : <VisibilityOff/>}
                                </IconButton>
                            </InputAdornment>
                        ),
                    }}
                    sx={{width: "100%"}}
                />
            </DialogContent>
            <DialogActions>
                <Button onClick={() => setOpenChangePasswordDialog(false)} variant="outlined" color="secondary"
                        disabled={formik.isSubmitting} autoFocus>
                    {t("ExpertMangement.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
                        disabled={formik.isSubmitting || !formik.dirty || !formik.isValid}>
                    {t("ExpertMangement.button-confirm")}
                </Button>
            </DialogActions>
        </>
    );
};
export default ChnagePasswordContent;