import { Button, TextField } from "@mui/material";
import { useFormik } from "formik";
import { Grid } from "../../../../components/grid/Grid";
import { SPACING } from "../../../../data/spacing";
import { Yup } from "../../../../lib/yup/yup";
import SaveIcon from "@mui/icons-material/Save";
import { changePassword } from "../../services/login";
import { useDispatch, useSelector } from "react-redux";
import { useContext } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";

export const ChangePasswordForm = () => {
  const [openNotif] = useContext(AppContext);
  const { userProfile } = useSelector((state) => state.userSlice);
  const dispatch = useDispatch();
  const formik = useFormik({
    initialValues: {
      lastPassword: "",
      newPassword: "",
      renewPassword: "",
    },
    validationSchema: Yup.object({
      lastPassword: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا رمز را وارد کنید!"),
      newPassword: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا رمز را وارد کنید!"),
      renewPassword: Yup.string()
        .required("این فیلد اجباری است!")
        .typeError("لطفا رمز را وارد کنید!"),
    }),
  });
  return (
    <Grid
      container
      direction="column"
      flex="1"
      justifyContent="space-between"
      gap={SPACING.SMALL}
    >
      <Grid container direction="column" gap={SPACING.SMALL}>
        <Grid>
          <TextField
            fullWidth
            id="lastPassword"
            value={formik.values.lastPassword}
            error={
              formik.touched.lastPassword
                ? Boolean(formik.errors.lastPassword)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.lastPassword && Boolean(formik.errors.lastPassword)
                ? formik.errors.lastPassword
                : null
            }
            label="رمز قبلی"
            type="password"
            autoComplete="current-password"
            variant="outlined"
          />
        </Grid>
        <Grid>
          <TextField
            fullWidth
            id="newPassword"
            value={formik.values.newPassword}
            error={
              formik.touched.newPassword
                ? Boolean(formik.errors.newPassword)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.newPassword && Boolean(formik.errors.newPassword)
                ? formik.errors.newPassword
                : null
            }
            label="رمز جدید"
            type="password"
            autoComplete="current-password"
            variant="outlined"
          />
        </Grid>
        <Grid>
          <TextField
            fullWidth
            id="renewPassword"
            value={formik.values.renewPassword}
            error={
              formik.touched.renewPassword
                ? Boolean(formik.errors.renewPassword)
                : null
            }
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.renewPassword &&
              Boolean(formik.errors.renewPassword)
                ? formik.errors.renewPassword
                : null
            }
            label="تکرار رمز جدید"
            type="password"
            autoComplete="current-password"
            variant="outlined"
          />
        </Grid>
        <Grid>
          <Button
            fullWidth
            size="large"
            variant="contained"
            startIcon={<SaveIcon />}
            onClick={() => {
              dispatch(
                changePassword({
                  username: userProfile.mobile,
                  password: formik.values.newPassword,
                })
              ).then((r) => {
                if (r.error) {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "مشکلی پیش آمده است!",
                    severity: "error",
                  });
                } else {
                  openNotif({
                    vertical: "top",
                    horizontal: "center",
                    msg: "رمزعبور با موفقیت تغییر یافت!",
                    severity: "success",
                  });
                  dispatch(
                    DRAWER({ right: false, bottom: false, content: null })
                  );
                }
              });
            }}
          >
            ذخیره تغییرات
          </Button>
        </Grid>
      </Grid>
    </Grid>
  );
};
