import React, { useState, useEffect } from 'react';
import {
  CardContainer,
  CardBody,
  ModalCardContainer,
  CloseModalButton,
} from "./index.styled";
import { IoMdClose } from "react-icons/io";
import Modal from "react-modal";
import ButtonComponent from "../../button";
import InputComponent from "../../input";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const SecurityQuestionModal = (props) => {
  const { findText } = useTranslation(wordStore);
  const modalCustomStyles = {
    overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      zIndex: 9999999999,
      transition: 'opacity 2000ms ease-in-out',
    },
    content: {
      position: 'absolute',
      overflow: 'auto',
      WebkitOverflowScrolling: 'scroll',
      outline: 'none',
      top: '50%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      transform: 'translate(-50%, -50%)',
      borderRadius: '30px',
      border: 'none',
      zIndex: 333333333,
      background: 'transparent',
      width: '450px',
    },
  };
  return (
    <Modal
      isOpen={props.isOpen}
      onRequestClose={props.onRequestClose}
      style={modalCustomStyles}
      closeTimeoutMS={0}
      ariaHideApp={false}
      contentLabel={findText("Selected Option")}
    >
      <ModalCardContainer>
        <CloseModalButton onClick={props.onRequestClose}>
          <IoMdClose />
        </CloseModalButton>

        <CardContainer style={props.style}>
          <CardBody>
            <form>
              <div className="sec-quest">
                <InputComponent
                  inputType={findText("text")}
                  label={findText("Security Question")}
                  placeholder={findText("Select your security Question")}
                  inputName={findText("question")}
                />

                <InputComponent
                  inputType={findText("text")}
                  label={findText("Answer")}
                  placeholder={findText("Enter your security answer")}
                  inputName={findText("answer")}
                />
              </div>

              <div className="btn__footer">
                <ButtonComponent
                  text={findText("Submit")}
                  type="submit"
                  styles={{
                    width: "195px",
                    margin: 0,
                    height: 40,
                  }}
                  onClick={props.nextOpen}
                />
              </div>
            </form>
          </CardBody>
        </CardContainer>
      </ModalCardContainer>
    </Modal>
  );
};
export default SecurityQuestionModal;
