import React, { useState } from "react";
import { AdminTwoFaSecurityContainer } from "./index.styled";
import img from "../assets/images/twofa.png";
import qr from "../assets/images/qr_code.png";
import shield from "../assets/images/shield.png";
import ButtonComponent from "../../button";
import Radio from "../../radio";
import InputComponent from "../../input";
import SecuritySuccessModal from "../modals/success-modal";
import ToggleButtonComponent from "../../toggle button";
import { useNavigate } from "react-router-dom";
import OTPSecurityModal from "../modals/otp-password-modal";
import SecurityQuestionModal from "../modals/security-question-modal";
import SecurityOptOutModal from "../modals/opt-out-modal";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const AdminTwoFaSecurity = () => {
  const { findText } = useTranslation(wordStore);
  const options = [
    {
      value: "Authenticator apps",
      label: "Authenticator apps",
    },
    {
      value: "Email",
      label: "Email",
    },
  ];
  const [type, setType] = useState("Authenticator apps");
  const [modalOne, setModalOne] = useState(false);
  const [otpModal, setOtpModal] = useState(false);
  const [authCurrent, setAuthCurrent] = useState(false);
  const [securityQuestionModal, setSecurityQuestionModal] = useState(false);
  const [successModal, setSuccessModal] = useState(false);
  const [optOutModal, setOptOutModal] = useState(false);
  const [emailCurrent, setEmailCurrent] = useState(false);
  const [checked, setChecked] = useState(false);
  const handleChange = (newValue) => {
    setChecked(newValue);
  };
  const handleOptionChange = (newValue) => {
    //console.log("New value:", newValue);
    setType(newValue);
  };
  return (
    <AdminTwoFaSecurityContainer>
      <div className="twofa_banner_container">
        <div className="twofa_bc_section">
          <div className="twofa_img">
            <img src={img} alt="" />
          </div>

          <div className="twofa_bc_details">
            <p className="twofa_bc_title">
              {findText("Help Protect Your Account")}
            </p>

            <p className="twofa_bc_subtitle">
              {findText("To get started with your two factor authentication,")}
              <br />
              {findText("select your means of receiving code")}
            </p>
          </div>
        </div>

        <div className="twofa_bc_section_two">
          <div className="twofa_radio">
            <Radio
              options={[
                {
                  value: findText("Authenticator apps"),
                  label: findText("Authenticator apps"),
                },
                {
                  value: findText("Email"),
                  label: findText("Email"),
                },
              ]}
              color="#FEBF10"
              defaultValue="Authenticator apps"
              onChange={handleOptionChange}
              direction={findText("row")}
            />

            <p className="twofa_note">{findText("Recommended.")}</p>
          </div>
        </div>
      </div>

      {/* for email 2fa  */}
      {type === "Email" && (
        <>
          {emailCurrent ? (
            <>
              <p className="current_txt">{findText("Current:")}</p>

              <div className="current_auth_main">
                <div className="auth_shield">
                  <img src={shield} alt="" />
                </div>

                <p className="current_auth_txt">
                  {findText("Email: **********oe@gmail.com")}{" "}
                </p>

                <div className="crr_toggle">
                  <ToggleButtonComponent />
                </div>
              </div>
            </>
          ) : (
            <ButtonComponent
              text={findText("Setup")}
              onClick={() => setOtpModal(true)}
              styles={{
                height: 44,
                marginLeft: 30,
              }}
            />
          )}
          <OTPSecurityModal
            isOpen={otpModal}
            onRequestClose={() => {
              setOtpModal(false);
            }}
            nextOpen={() => {
              setOtpModal(false);
              setSecurityQuestionModal(true);
            }}
            OTPvalue={findText("drp******@gmail.com ")}
            OTPtype={findText("email")}
          />
          <SecurityQuestionModal
            isOpen={securityQuestionModal}
            onRequestClose={() => setSecurityQuestionModal(false)}
            nextOpen={() => {
              setSecurityQuestionModal(false);
              setSuccessModal(true);
            }}
          />
          <SecuritySuccessModal
            isOpen={successModal}
            onRequestClose={() => {
              setSuccessModal(false);
              setEmailCurrent(true);
            }}
            title={findText(
              "Your Two factor authentication is setup successfully."
            )}
          />
          <SecurityOptOutModal
            isOpen={optOutModal}
            onRequestClose={() => {
              setOptOutModal(false);
              setOtpModal(true);
            }}
          />
        </>
      )}

      {/* for Authenticator apps 2fa */}
      {type === "Authenticator apps" && (
        <>
          {authCurrent ? (
            <>
              <p className="current_txt">{findText("Current:")}</p>

              <div className="current_auth_main">
                <div className="auth_shield">
                  <img src={shield} alt="" />
                </div>

                <p className="current_auth_txt">
                  {findText("Google Authenticator")}
                </p>

                <div className="crr_toggle">
                  <ToggleButtonComponent />
                </div>
              </div>
            </>
          ) : (
            <div className="twofa_main">
              <p className="twofa_apps_txt">
                {findText("Set up via Third Party Authentication")}{" "}
              </p>

              <div className="twofa_apps_row">
                <div className="twofa_apps_qr">
                  <div className="taq_box">
                    <img src={qr} alt="" />
                  </div>

                  <p className="twofa_apps_subtitle">
                    {findText(
                      "Use your authentication app (such as Google Authenticator) to scan this QR code."
                    )}
                  </p>
                </div>

                <div className="auth_app_code">
                  <div>
                    <div className="app_code_txt">
                      {findText("TAHT ST5D TG7S 9872")}
                    </div>

                    <div className="app_code_note">
                      {findText(
                        "Or enter this code above into your authenticator app"
                      )}
                    </div>
                  </div>

                  <div className="app_code_form">
                    <div className="form_group">
                      <InputComponent
                        inputType={findText("text")}
                        label={findText("Verification Code")}
                        required
                      />
                      <ButtonComponent
                        text={findText("Verify")}
                        styles={{
                          width: "",
                        }}
                        onClick={() => setModalOne(true)}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          <SecuritySuccessModal
            isOpen={modalOne}
            onRequestClose={() => {
              setModalOne(false);
              setAuthCurrent(true);
            }}
            title={findText(
              "Your Two factor authentication is setup successfully."
            )}
          />
        </>
      )}
    </AdminTwoFaSecurityContainer>
  );
};
export default AdminTwoFaSecurity;
