import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Button, Container, Paper, Stack, Typography,} from "@mui/material";
import {Formik} from "formik";
import * as Yup from "yup";
import {useTranslations} from "next-intl";
import PasswordField from "@/core/components/PasswordField";
import StyledForm from "@/core/components/StyledForm";
import {SET_USER_PASSWORD} from "@/core/data/apiRoutes";
import SvgChangePassword from "@/core/components/svgs/SvgChangePassword";
import useRequest from "@/lib/app/hooks/useRequest";

const DashboardChangePasswordComponent = () => {
    const t = useTranslations();
    const requestServer = useRequest({auth: true})

    const handleSubmit = (values, {setSubmitting, resetForm}) => {
        requestServer(SET_USER_PASSWORD, 'post', {
            data: {
                current_password: values.current_password,
                new_password: values.new_password,
                new_password_confirmation: values.new_password_confirmation,
            },
        }).then((response) => {
            resetForm();
        }).catch(() => {
        }).finally(() => {
            setSubmitting(false);
        });
    };
    const initialValues = {
        current_password: "",
        new_password: "",
        new_password_confirmation: "",
    };
    const validationSchema = Yup.object().shape({
        current_password: Yup.string().required(
            t("ChangePassword.error_message_current_password")
        ),
        new_password: Yup.string()
            .min(8, t("ChangePassword.error_message_password_length"))
            .required(t("ChangePassword.error_message_new_password")),
        new_password_confirmation: Yup.string()
            .required(t("ChangePassword.error_message_confirm_password"))
            .test(
                t("ChangePassword.error_message_password_match"),
                t("ChangePassword.error_message_password_not_match"),
                function (value) {
                    return this.parent.new_password === value;
                }
            ),
    });

    return (
        <DashboardLayouts>
            <CenterLayout>
                <Container maxWidth="sm">
                    <Formik
                        initialValues={initialValues}
                        onSubmit={handleSubmit}
                        validationSchema={validationSchema}
                    >
                        {(props) => (
                            <StyledForm
                                onSubmit={(e) => {
                                    e.preventDefault();
                                    props.handleSubmit();
                                }}
                            >
                                <Paper elevation={0}>
                                    <Stack spacing={3} sx={{p: 5}} component="div">
                                        <SvgChangePassword width={300} height={200}/>
                                        <Typography margin={2} variant="h4" textAlign="center">
                                            {t("ChangePassword.typography_change_password")}
                                        </Typography>
                                        <Stack spacing={1} component="div">
                                            <PasswordField
                                                name="current_password"
                                                label={t("ChangePassword.label_current_password")}
                                                error={
                                                    props.touched.current_password &&
                                                    props.errors.current_password
                                                        ? true
                                                        : false
                                                }
                                                helperText={
                                                    props.touched.current_password
                                                        ? props.errors.current_password
                                                        : null
                                                }
                                            />
                                        </Stack>
                                        <Stack spacing={1} component="div">
                                            <PasswordField
                                                name="new_password"
                                                label={t("ChangePassword.label_new_password")}
                                                error={
                                                    props.touched.new_password &&
                                                    props.errors.new_password
                                                        ? true
                                                        : false
                                                }
                                                helperText={
                                                    props.touched.new_password
                                                        ? props.errors.new_password
                                                        : null
                                                }
                                            />
                                        </Stack>
                                        <Stack spacing={1} component="div">
                                            <PasswordField
                                                name="new_password_confirmation"
                                                label={t("ChangePassword.label_confirm_password")}
                                                error={
                                                    props.touched.new_password_confirmation &&
                                                    props.errors.new_password_confirmation
                                                        ? true
                                                        : false
                                                }
                                                helperText={
                                                    props.touched.new_password_confirmation
                                                        ? props.errors.new_password_confirmation
                                                        : null
                                                }
                                            />
                                        </Stack>
                                        <Button
                                            type="submit"
                                            fullWidth
                                            variant="contained"
                                            color="primary"
                                            size="large"
                                            disabled={props.isSubmitting}
                                        >
                                            {props.isSubmitting
                                                ? t("SubmitButton.button_while_submit")
                                                : t("SubmitButton.button_submit")}
                                        </Button>
                                    </Stack>
                                </Paper>
                            </StyledForm>
                        )}
                    </Formik>
                </Container>
            </CenterLayout>
        </DashboardLayouts>
    );
};
export default DashboardChangePasswordComponent;