import { useState, useEffect } from "react";
import {
  CardBody,
  ModalCardContainer,
  ExpiryCardContainer,
} from "./index.styled";
import Modal from "react-modal";
import ButtonComponent from "../../button";
import RemoveUser from "./img/removeUser.png";
import { ErrorBookIcon } from "./img/book";
import moment from "moment";
import { showErrorToast } from "../../../customToast";
import "react-toastify/dist/ReactToastify.css";
import { useNavigate } from "react-router-dom";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const SubscriptionExpiredModal = ({
  subscriptionExpiredModalIsOpen,
  setSubscriptionExpiredModalIsOpen,
  getCurrentSubscriptionData,
}) => {
  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 1000ms ease-in-out",
    },
    content: {
      position: "absolute",
      overflow: "auto",
      WebkitOverflowScrolling: "scroll",
      outline: "none",
      top: "40%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
      borderRadius: "30px",
      border: "none",
      zIndex: 333333333,
      background: "transparent",
      width: "780px",
    },
  };
  const [countdown, setCountdown] = useState(null);

  // useEffect(() => {
  //   const targetDate = moment(
  //     getCurrentSubscriptionData?.data?.grace_period_end,
  //     "YYYY-MM-DD"
  //   );
  //   const interval = setInterval(() => {
  //     const now = moment();
  //     const diff = targetDate.diff(now);
  //     const hours = Math.floor(diff / 3600000);
  //     const minutes = Math.floor((diff % 3600000) / 60000);
  //     const seconds = Math.floor((diff % 60000) / 1000);

  //     if (diff <= 0) {
  //       setCountdown("0h - 0m - 0s");
  //     } else {
  //       setCountdown(`${hours}h - ${minutes}m - ${seconds}s`);
  //     }
  //   }, 1000);

  //   return () => {
  //     clearInterval(interval);
  //   };
  // }, []);

  const subId = getCurrentSubscriptionData?.data?.id;
  const handleNavigateRenewal = () => {
    const host = window.location.hostname;
    const port = window.location.port ? `:${window.location.port}` : "";
    const protocol = window.location.protocol;
    const baseUrl = `${protocol}//${host}${port}`;
    const renewalPath = "/settings/payment/details/renewal";
    if (subId) {
      const renewalUrl = `${baseUrl}${renewalPath}?subId=${subId}`;
      window.location.href = renewalUrl;
    } else {
      showErrorToast("Error getting your subscription, please try again!");
    }
  };
  const expiryDate = moment("2024-05-31", "YYYY-MM-DD"); // Replace with your expiry date

  const isWithin10Days = moment().add(10, "days").isSameOrBefore(expiryDate);
  const [daysLeft, setDaysLeft] = useState(null);
  useEffect(() => {
    const targetDate = moment(expiryDate);
    const now = moment();
    const diff = targetDate.diff(now, "days");
    setDaysLeft(diff);
  }, [expiryDate]);
  //console.log(daysLeft)

  return (
    <ModalCardContainer>
      {/* <CloseModalButton
          onClick={() => {
            setSubscriptionExpiredModalIsOpen(false);
          }}
        >
          <IoMdClose />
        </CloseModalButton> */}

      <ExpiryCardContainer>
        <CardBody>
          <div className="expiry_modal_container">
            <div className="logo_section">
              <img src={RemoveUser} alt={findText("shield")} />
            </div>

            <div className="expiry_details">
              <div className="enterprise_info">
                <p>
                  <ErrorBookIcon />
                </p>
                <p>{findText("Enterprise")}</p>
              </div>

              <h6>
                {" "}
                {findText(
                  "Your subscription to Learngual Enterprise plan has expired",
                )}{" "}
              </h6>
              <p
                dangerouslySetInnerHTML={{
                  __html: findText(
                    "Your students and instructors will no longer be able to access your courses after {countdown}",
                    {
                      countdown: `<br/>  <span class="error-txt">${
                        countdown || 0
                      }</span>`,
                    },
                  ),
                }}
              ></p>

              <div className="btn__footer">
                <ButtonComponent
                  text={findText("Select Plan")}
                  type="secondary"
                  height={40}
                  styles={{
                    fontSize: "14px",
                    padding: "14px 9px",
                    margin: 0,
                    backgroundColor: findText("transparent"),
                  }}
                  onClick={() => (window.location.href = "/settings/payment")}
                />
                <ButtonComponent
                  text={findText("Renew subscription")}
                  type="submit"
                  height={40}
                  styles={{
                    fontSize: "14px",
                    padding: "14px 10px",
                    margin: 0,
                    boxShadow: "0px 7px 15px rgba(254, 191, 16, 0.25)",
                  }}
                  onClick={() => handleNavigateRenewal()}
                />
              </div>
            </div>
          </div>
        </CardBody>
      </ExpiryCardContainer>
    </ModalCardContainer>
  );
};
export default SubscriptionExpiredModal;
