import React, { useState } from "react";
import { AdminSecurityContainer } from "./index.styled";
import { useNavigate } from "react-router-dom";
import AdminSecurityPassword from "./password";
import AdminSecurityChangePassword from "./password/change-password";
import AdminTwoFaSecurity from "./2fa";
import OTPSecurityModal from "./modals/otp-password-modal";
import SecuritySuccessModal from "./modals/success-modal";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const AdminSecurity = () => {
  const { findText } = useTranslation(wordStore);
  const [activeTab, setActiveTab] = useState(1);
  const [modalIsOpen, setIsOpen] = useState(false);
  const [passwordPage, setPasswordPage] = useState(false);
  const [modalOne, setModalOne] = useState(false);
  const closeModal = () => {
    setIsOpen(false);
  };
  return (
    <AdminSecurityContainer>
      <>
        {!passwordPage && (
          <>
            <div className="ass_header">
              <p className="ass_title">{findText("Security")}</p>
              <p className="ass_ref">
                {findText("Settings")}
                <span className="slash">/</span>{" "}
                <span>{findText("Profile")}</span>
              </p>
            </div>

            <div className="ass_tab_row">
              <div className="ass_tab_group">
                <div
                  className={findText("ass_tab {arg1}", {
                    arg1: activeTab === 1 ? "active" : "",
                  })}
                  onClick={() => setActiveTab(1)}
                >
                  {findText("Password")}
                </div>
                <div
                  className={findText("ass_tab {arg1}", {
                    arg1: activeTab === 2 ? "active" : "",
                  })}
                  onClick={() => setActiveTab(2)}
                >
                  {findText("2F Authentication")}
                </div>
              </div>
            </div>

            {activeTab === 1 && (
              <>
                <AdminSecurityPassword onClick={() => setIsOpen(true)} />
              </>
            )}
            {activeTab === 2 && (
              <>
                <AdminTwoFaSecurity />
              </>
            )}
          </>
        )}
      </>

      {passwordPage && (
        <AdminSecurityChangePassword
          modalOne={modalOne}
          setModalOne={setModalOne}
          nextOpen={() => setPasswordPage(false)}
          onRequestClose={() => {
            setPasswordPage(false);
            setModalOne(false);
          }}
        />
      )}

      <OTPSecurityModal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        nextOpen={() => {
          setPasswordPage(true);
          setIsOpen(false);
        }}
        OTPvalue={findText("*****222")}
        OTPtype={findText("phone")}
      />
    </AdminSecurityContainer>
  );
};
export default AdminSecurity;
