Untitled

import { useEffect, useState } from "react";
import "./PasswordSetupScreen.scss";
import { useTranslation } from "react-i18next";
import { LockedInPasswordInput } from "../../../../design/inputfields/inputFields";
import {
  LockedInPasswordBtn,
  LockedInPasswordCancelBtn,
} from "../../../../design/buttons/Buttons";
import { useDispatch, useSelector } from "react-redux";
import {
  HIDE_LOCKEDIN_SCREEN,
  LOCK_MODULES_SCREEN,
} from "../../../../redux/constant/lockedInConstant";
import { validateLockedInPassword } from "../../../../utilities/helper";
import { updateLockedIn } from "../../../../redux/action/lockedInAction";
// import MuiSnackBar from "../../../../design/snackbar/MuiSnackBar";


const PasswordSetupScreen = () => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const [show, setShow] = useState(false);
  const [showReenterPassword, setShowReenterPassword] = useState(false);
  const [showOldPassword, setShowOldPassword] = useState(false);
  const [oldPassword, setOldPassword] = useState("");
  const [password, setPassword] = useState("");
  const [reEnterPassword, setReEnterPassword] = useState("");
  const [showPasswordError, setShowPasswordError] = useState(false);
  const [showReenterPasswordError, setShowReenterPasswordError] = useState(false);
  const [showOldPasswordError, setShowOldPasswordError] = useState(false);
  const [showPasswordErrorText, setShowPasswordErrorText] = useState("");
  const [showReenterPasswordErrorText, setShowReenterPasswordErrorText] = useState("");
  const [showOldPasswordErrorText, setShowOldPasswordErrorText] = useState("");

  const { passwordMatch, attemptsRemain} = useSelector((state) => state.lockedIn);
    const [isDisabled, setIsDisabled] = useState(true);


  const showPassword = () => {
    setShow(!show);
  };

  // const [snackbar, setSnackBar] = useState({
  //   open: false,
  //   message: "",
  //   success: null,
  // });

  const showReenterPasswordFunc = () => {
    setShowReenterPassword(!showReenterPassword);
  };

  const showOldPasswordFunc = () => {
    setShowOldPassword(!showOldPassword);
  };

  const closedPasswordSetupScreen = () => {
    dispatch({
      type: LOCK_MODULES_SCREEN,
    });
    dispatch({
      type: HIDE_LOCKEDIN_SCREEN,
    });
  };

  useEffect(() => {
    if (passwordMatch === false) {
      setShowOldPasswordError(true);
      setShowOldPasswordErrorText(`Incorrect old password, ${attemptsRemain} more tries left`);
    }
  }, [passwordMatch,attemptsRemain]);

  // useEffect(() => {
  //   if (forgotLockedInPinScreen === true && passwordMatch === true) {
  //     // Reset error messages
  //     setIsDisabled(false);
  //     setShowPasswordErrorText("");
  //     setShowReenterPasswordErrorText("");
  //     setShowOldPasswordErrorText("");
  //     setShowReenterPasswordError(false);
  //     setShowPasswordError(false);
  //     setShowOldPasswordError(false);

  //   }
  //   else if (forgotLockedInPinScreen === true && passwordMatch === false) {
  //     setIsDisabled(true);
  //     setShowOldPasswordError(true);
  //     setShowOldPasswordErrorText("`Incorrect old password, ${attemptsRemain} more tries left`");
  //   }
  // }, [passwordMatch,attemptsRemain]);

  const setUpLockedInPassword = () => {
    // Validate old password
    // if (oldPassword !== "123456789") {
    //     console.log(oldPassword)
    //     // console.log(storedOldPassword)
    //   setShowOldPasswordError(true);
    //   setShowOldPasswordErrorText("Old password is incorrect");
    //   return;
    // }

    // Validate new password
    if (password === "") {
      setShowPasswordError(true);
      setShowPasswordErrorText("Please enter the password");
      return;
    }

    // Validate re-entered password
    if (reEnterPassword === "") {
      setShowReenterPasswordError(true);
      setShowReenterPasswordErrorText("Please re-enter the password");
      return;
    }

    // Check if new password and re-entered password match
    if (password !== reEnterPassword) {
      setShowReenterPasswordError(true);
      setShowReenterPasswordErrorText("Pin mismatched");
      return;
    }

    dispatch(updateLockedIn(oldPassword, password));

    // Successful password setup actions
    // window.alert("Password setup successfully");
    // dispatch({
    //   type: SUCCESSFULLY_SETUP_SCREEN,
    // });
    // dispatch({
    //   type: HIDE_LOCKEDIN_SCREEN,
    // });
  };

  useEffect(() => {
    // if (passwordMatch === true) {
    //   setShowPasswordErrorText("");
    // }
    // else if (passwordMatch === false) {
    //   setShowOldPasswordError(true);
    //   setShowOldPasswordErrorText(`Incorrect old password, ${attemptsRemain} more tries left`);
    // }
    // Validate new password input
    if (password !== "" && !validateLockedInPassword(password)) {
      setIsDisabled(true);
      setShowPasswordError(true);
      setShowPasswordErrorText(t("passwordValidationWarning"));
    } else {
      setIsDisabled(true);
      setShowPasswordError(false);
      setShowPasswordErrorText("");
    }

    // Validate re-enter password input
    if (reEnterPassword !== "" && password !== reEnterPassword) {
      setIsDisabled(true);
      setShowReenterPasswordError(true);
      setShowReenterPasswordErrorText("Pin mismatched");
    } else {
      setIsDisabled(false);
      setShowReenterPasswordError(false);
      setShowReenterPasswordErrorText("");
    }
  }, [password, reEnterPassword,setIsDisabled, t]);

  return (
    <main className="password_setup_main">
      {/* <MuiSnackBar
        open={snackbar.open}
        message={snackbar.message}
        success={snackbar.success}
        onClose={() => setSnackBar({ message: "", success: true, open: false })}
      /> */}
      <h2>{t("oldLockedInPasswordBtnText")}</h2>

      {/* Old Password Input */}
      <LockedInPasswordInput
        placeholder={t("oldLockedInPasswordInputText")}
        togglePasswordVisibility={showOldPassword}
        showPassword={showOldPasswordFunc}
        onChange={(e) => setOldPassword(e.target.value)}
        showError={showOldPasswordError}
        showErrorMessage={showOldPasswordErrorText}
      />

      <div className="divider" />

      <h2>{t("setupnewLockedInPasswordBtnText")}</h2>

      {/* New Password Input */}
      <LockedInPasswordInput
        placeholder={t("lockedInpasswordInput")}
        togglePasswordVisibility={show}
        showPassword={showPassword}
        onChange={(e) => setPassword(e.target.value)}
        showError={showPasswordError}
        showErrorMessage={showPasswordErrorText}
      />

      <div className="divider" />

      {/* Re-enter Password Input */}
      <LockedInPasswordInput
        placeholder={t("reEnterLockedInpasswordInput")}
        togglePasswordVisibility={showReenterPassword}
        showPassword={showReenterPasswordFunc}
        onChange={(e) => setReEnterPassword(e.target.value)}
        showError={showReenterPasswordError}
        showErrorMessage={showReenterPasswordErrorText}
      />
      <div className="divider" />
      <div className="password_setup_text">
        <p className="label-02-bold">{t("enterStringPassword")}</p>
        <p className="label-02-medium">{t("passwordStrength")}</p>
      </div>
      <LockedInPasswordBtn
        text={t("MAPINBtnText")}
        isDisabled={isDisabled} // Ensure button is not disabled
        onClicked={setUpLockedInPassword}
      />
      <div className="divider" />
      <LockedInPasswordCancelBtn
        text={t("cancelBtnText")}
        onClicked={closedPasswordSetupScreen}
      />
    </main>
  );
};

export default PasswordSetupScreen;