import React, { useState } 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 img from "../assets/images/shield_big.png";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const PreviewModal = (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: "422px",
    },
  };
  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>
          <CardBody>
            <div className="ssm_img_opt">
              <img src={img} alt="" />
            </div>
            <p className="ssm_txt_opt">{props.title}</p>
            <p className="ssm_sub_txt">{props.subTitle}</p>
            <div className="btn__footer">
              <ButtonComponent
                text={props.secondaryButtonText || "No, Cancel"}
                type="secondary"
                styles={{
                  width: "150px",
                  margin: 0,
                  padding: 10,
                  height: 40,
                }}
                onClick={props.onRequestClose}
              />
              <ButtonComponent
                text={props.primaryButtonText || "Yes, Add"}
                styles={{
                  width: "150px",
                  marginLeft: 12,
                  padding: 10,
                  height: 40,
                }}
                onClick={props.nextOpen}
              />
            </div>
          </CardBody>
        </CardContainer>
      </ModalCardContainer>
    </Modal>
  );
};
export default PreviewModal;
