import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useSiteStatus } from "@settings/contexts/SiteStatusContext";
import { WarningIcon, CancelIcon } from "@app/assets/images/icons";
import Button from "@app/components/button/Button";
import "./disabled-banner-styles.scss";

/**
 * Dismissible banner shown across the admin app while the site is disabled
 * (Biogr.id subscription inactive) - see WP-4534. Dismissal is scoped to the
 * current disable episode: it reappears if the site becomes disabled again
 * after being dismissed, since `disabledSince` resets on every new episode.
 */
const DisabledBanner = () => {
  const { isDisabled, disabledSince } = useSiteStatus();
  const [dismissed, setDismissed] = useState(false);
  const navigate = useNavigate();
  const localization = sfsyncI18n.data;

  useEffect(() => {
    setDismissed(false);
  }, [disabledSince]);

  if (!isDisabled || dismissed) {
    return null;
  }

  return (
    <div className="sfsync-disabledBanner">
      <div className="sfsync-disabledBanner-content">
        {WarningIcon}
        <div className="sfsync-disabledBanner-text">
          <span className="sfsync-disabledBanner-title">
            {localization.site_disabled_banner_title}
          </span>
          <span className="sfsync-disabledBanner-message">
            {localization.site_disabled_banner_message}
          </span>
        </div>
      </div>
      <div className="sfsync-disabledBanner-actions">
        <Button
          text={localization.reactivate_subscription}
          onClickHandler={() => navigate("/reactivate-subscription")}
        />
        <button
          type="button"
          className="sfsync-disabledBanner-dismiss"
          aria-label={localization.dismiss}
          onClick={() => setDismissed(true)}
        >
          {CancelIcon}
        </button>
      </div>
    </div>
  );
};

export default DisabledBanner;