import React, { useState } from "react";
import { AdminSecurityPasswordContainer } from "./index.styled";
import ButtonComponent from "../../button";
import { useNavigate } from "react-router-dom";
import { BackArrowIcon } from "../assets/svg/backArrow";
import InputComponent from "../../input";
import SecuritySuccessModal from "../modals/success-modal";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const AdminSecurityChangePassword = ({
  passwordPage,
  modalOne,
  setModalOne,
  onRequestClose,
  nextOpen,
}) => {
  const { findText } = useTranslation(wordStore);
  const [otpModal, setOtpModal] = useState(false);
  return (
    <AdminSecurityPasswordContainer>
      <div className="ass_header">
        <p className="ass_title">
          <span onClick={nextOpen}>
            <BackArrowIcon />
          </span>
          {findText("Change Password")}
        </p>
        <p className="ass_ref">
          {findText("Security")}
          <span className="slash">/</span>
          {findText("Password")} <span className="slash">/</span>{" "}
          <span>{findText("Change Password")}</span>
        </p>
      </div>

      <form action="">
        <div className="form_group">
          <InputComponent
            inputType={findText("password")}
            label={findText("Old Password")}
            placeholder={findText("your password here")}
            required
          />
        </div>
        <div className="form_group">
          <InputComponent
            inputType={findText("password")}
            label={findText("New Password")}
            placeholder={findText("your password here")}
            required
          />
        </div>

        <div className="form_group mb_30">
          <InputComponent
            inputType={findText("password")}
            label={findText("Confirm New Password")}
            placeholder={findText("your password here")}
            required
          />
        </div>

        <ButtonComponent
          text={findText("Change Password")}
          styles={{
            width: "100%",
          }}
          onClick={(e) => {
            e.preventDefault();
            setModalOne(true);
          }}
        />
      </form>

      <SecuritySuccessModal
        isOpen={modalOne}
        onRequestClose={onRequestClose}
        title={findText("Password changed successfully.")}
      />
    </AdminSecurityPasswordContainer>
  );
};
export default AdminSecurityChangePassword;
