import React, { useState, useEffect } from "react";
import {
  CardContainer,
  CardBody,
  CardHeader,
  ModalCardContainer,
  CloseModalButton,
  Radio,
} 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";
import { toast } from "react-toastify";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const ReportModal = (props) => {
  const { findText } = useTranslation(wordStore);
  const [active, setActive] = useState(null);
  const [isSubmit, setIsSubmit] = useState(false);
  const [formData, setFormData] = useState({
    reason: "",
    user: props.userID,
  });
  const [reportForm, setReportForm] = useState({});
  const { handleReportUser, reportUserData } = useMessaging();
  const handleReport = () => {
    setIsSubmit(true);
  };
  useEffect(() => {
    const data = {
      ...formData,
      reason: formData.reason,
      user: props.userID,
    };
    setReportForm(data);
  }, [active]);
  useEffect(() => {
    if (props.setIsOpen === false) {
      setActive(null);
      setFormData({});
      setIsSubmit(false);
    }
  }, [props.setIsOpen]);
  useEffect(() => {
    if (isSubmit) {
      handleReportUser(reportForm);
    }
  }, [isSubmit]);
  useEffect(() => {
    if (reportUserData?.response?.status === 200) {
      toast.success(reportUserData?.data?.detail);
      props.setIsOpen(false);
      setIsSubmit(false);
      setActive(null);
      setReportForm({});
    }
  }, [reportUserData?.response]);
  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: "562px",
    },
  };
  return (
    <Modal
      isOpen={props.isOpen}
      onRequestClose={() => {
        setActive(null);
        props.setIsOpen(false);
      }}
      style={modalCustomStyles}
      ariaHideApp={false}
      contentLabel={findText("Selected Option")}
    >
      <ModalCardContainer>
        <CloseModalButton
          onClick={() => {
            setActive(null);
            props.setIsOpen(false);
          }}
        >
          <IoMdClose />
        </CloseModalButton>

        <CardContainer style={props.style}>
          <CardHeader>
            <h1 className="report-title">
              {findText("Report harmful activity on\xA0Learngual")}
            </h1>
            <h6 className="report-subtitle">
              {findText(
                "Let us know if this user has engaged in any harmful activity"
              )}
            </h6>
          </CardHeader>

          <CardBody>
            <ul>
              <li>
                <Radio
                  onClick={() => {
                    setActive(1);
                    setFormData((prev) => ({
                      ...prev,
                      reason: "Verbal harassment",
                    }));
                  }}
                  className={findText("{arg1}", {
                    arg1: active === 1 ? "active" : "",
                  })}
                />
                {findText("Verbal harassment")}
              </li>

              <li>
                <Radio
                  className={findText("{arg1}", {
                    arg1: active === 2 ? "active" : "",
                  })}
                  onClick={() => {
                    setActive(2);
                    setFormData({
                      ...reportForm,
                      reason: "Hate speech and threatening messages",
                    });
                  }}
                />
                {findText("Hate speech and threatening messages")}
              </li>

              <li>
                <Radio
                  className={findText("{arg1}", {
                    arg1: active === 3 ? "active" : "",
                  })}
                  onClick={() => {
                    setActive(3);
                    setFormData({
                      ...reportForm,
                      reason: "Sharing inappropriate or explicit content",
                    });
                  }}
                />
                {findText("Sharing inappropriate or explicit content")}
              </li>

              <li>
                <Radio
                  className={findText("{arg1}", {
                    arg1: active === 4 ? "active" : "",
                  })}
                  onClick={() => {
                    setActive(4);
                    setFormData({
                      ...reportForm,
                      reason:
                        "Attempts to gain private information without consent",
                    });
                  }}
                />
                {findText(
                  "Attempts to gain private information without consent"
                )}
              </li>

              <li>
                <Radio
                  className={findText("{arg1}", {
                    arg1: active === 5 ? "active" : "",
                  })}
                  onClick={() => {
                    setActive(5);
                    setFormData({
                      ...reportForm,
                      reason: "Cyberbullying and cyber theft attempts",
                    });
                  }}
                />
                {findText("Cyberbullying and cyber theft attempts")}
              </li>

              <li>
                <Radio
                  className={findText("{arg1}", {
                    arg1: active === 6 ? "active" : "",
                  })}
                  onClick={() => {
                    setActive(6);
                    setFormData({
                      ...reportForm,
                      reason: "Other violations",
                    });
                  }}
                />{" "}
                {findText("Other violations")}
              </li>
            </ul>

            <div className="footer-wrapper">
              <span>
                <WarningIcon />
              </span>
              <p>
                {findText(
                  "Don't hesitate to report harmful or illicit behavior. Learngual is committed to creating a safe space for everyone to learn\xA0and\xA0connect."
                )}
              </p>
            </div>

            <ButtonComponent
              text={findText("Submit")}
              height={40}
              styles={{
                marginLeft: findText("auto"),
              }}
              onClick={() => handleReport()}
              disabled={reportUserData?.loading}
            />
          </CardBody>
        </CardContainer>
      </ModalCardContainer>
    </Modal>
  );
};
export default ReportModal;
