import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, Button, Container, Paper, Stack, Typography,} from "@mui/material";
import Image from "next/image";
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 {CHANGE_PASSWORD} from "@/core/data/apiRoutes";
import useUser from "@/lib/app/hooks/useUser";
import axios from "axios";
import Notifications from "@/core/components/notifications";
import useDirection from "@/lib/app/hooks/useDirection";
import {toast} from "react-toastify";

const DashboardChangePasswordComponent = () => {
    const t = useTranslations();
    const {token} = useUser();
    const {directionApp} = useDirection();

    const handleSubmit = (values, {setSubmitting, resetForm}) => {
        toast.dismiss();
        const pendingToast = toast(t("notifications.pending"), {
            position: directionApp === "ltr" ? "top-left" : "top-right",
            autoClose: false,
            closeOnClick: false,
            draggable: false,
        });
        axios
            .post(
                CHANGE_PASSWORD,
                {
                    current_password: values.current_password,
                    new_password: values.new_password,
                    new_password_confirmation: values.new_password_confirmation,
                },
                {
                    headers: {authorization: `Bearer ${token}`},
                }
            )
            .then((response) => {
                toast.dismiss(pendingToast); // Dismiss the pending toast notification
                Notifications(directionApp, response, t);
                resetForm();
            })
            .catch((error) => {
                toast.dismiss(pendingToast); // Dismiss the pending toast notification
                Notifications(directionApp, error.response, t);
            })
            .finally(() => {
                setSubmitting(false); // Set `setSubmitting` to false after the API request completes
            });
    };
    const initialValues = {
        current_password: "",
        new_password: "",
        new_password_confirmation: "",
    };
    const validationSchema = Yup.object().shape({
        current_password: Yup.string().required(
            t("ChangePassword.error_message_required")
        ),
        new_password: Yup.string()
            .min(8, t("ChangePassword.error_message_password_length"))
            .required(t("ChangePassword.error_message_required")),
        new_password_confirmation: Yup.string()
            .required(t("ChangePassword.error_message_required"))
            .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">
                                        <Box
                                            sx={{position: "relative", width: "100%", height: 200}}
                                        >
                                            <Image fill src="/images/change-password.svg" alt=""/>
                                        </Box>
                                        <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;