import React, { useState, useEffect } from "react";
import {
  CardContainer,
  CardBody,
  CardHeader,
  ModalCardContainer,
  CloseModalButton,
} from "./index.styled";
import { IoMdClose } from "react-icons/io";
import Modal from "react-modal";
import ButtonComponent from "../../../button";
import { WarningIcon } from "../../assets/svg/warning";
import useMessaging from "../../hooks/useMessaging";

/* Modal for deleting a chat
 *
 */
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const DeleteChatModal = (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%, -100%)",
      borderRadius: "30px",
      border: "none",
      zIndex: 333333333,
      background: "transparent",
      width: "562px",
    },
  };
  return (
    <Modal
      isOpen={props.isOpen}
      onRequestClose={() => {
        props.setDeleteChatModalIsOpen(false);
      }}
      style={modalCustomStyles}
      ariaHideApp={false}
      contentLabel={findText("Selected Option")}
    >
      <ModalCardContainer>
        <CloseModalButton
          onClick={() => {
            props.setDeleteChatModalIsOpen(false);
          }}
        >
          <IoMdClose />
        </CloseModalButton>

        <CardContainer style={props.style}>
          <CardBody>
            <p className="del-chat-title">{findText("Chat delete")}</p>
            <p className="del-chat-subtitle">
              {findText("Are you sure you want to delete this chat?")}
            </p>

            <div className="btn__footer">
              <ButtonComponent
                text={findText("No, cancel")}
                type="secondary"
                height={40}
                styles={{
                  width: 140,
                  padding: 10,
                  fontSize: "12px",
                  boxShadow: "0px 7px 15px rgba(254, 191, 16, 0.25)",
                }}
                onClick={() => {
                  props.setDeleteChatModalIsOpen(false);
                }}
              />

              <ButtonComponent
                text={findText("Yes! delete")}
                height={40}
                onClick={props.handleClearChat}
                styles={{
                  width: 140,
                  fontSize: "12px",
                  padding: 10,
                  boxShadow: "0px 7.72826px 15.4565px rgba(249, 84, 84, 0.25)",
                  backgroundColor: "#F95454",
                }}
              />
            </div>
          </CardBody>
        </CardContainer>
      </ModalCardContainer>
    </Modal>
  );
};
export default DeleteChatModal;
