import React, { useEffect, useState } from "react";
import { __ } from "@wordpress/i18n";
import { buildUrl } from "@libs/url";
import { fetchSettings } from "../pages/Settings/settingsHelpers";

const RenewalSyncDefaultsNotice = ({ className }) => {
  const [defaults, setDefaults] = useState(null);
  const [loadError, setLoadError] = useState(false);

  useEffect(() => {
    let active = true;
    fetchSettings()
      .then((settings) => {
        if (active) setDefaults(settings.renewals);
      })
      .catch(() => {
        if (active) setLoadError(true);
      });
    return () => {
      active = false;
    };
  }, []);

  const adminUrl =
    window.arraySubs?.env?.wpAdminUrl || `${window.location.origin}/wp-admin/`;
  const settingsUrl = `${buildUrl(`${adminUrl}admin.php`, {
    page: "arraysubs-mainadmin",
  })}#/renewal-flow/settings`;

  return (
    <div className={className}>
      <p>
        {__("New eligible subscriptions follow the defaults in", "arraysubs")}{" "}
        <a href={settingsUrl} target="_blank" rel="noopener noreferrer">
          {__("Renewal Flow → Renewal Settings", "arraysubs")}
        </a>{" "}
        {__(
          "unless Flexible Renewal Sync is enabled for this product. Enabling it overrides these defaults.",
          "arraysubs",
        )}
      </p>
      <p>
        {defaults ? (
          <>
            <strong>{__("Store defaults:", "arraysubs")}</strong>{" "}
            {__("Renewal sync:", "arraysubs")}{" "}
            <strong>
              {defaults.sync_to_billing_cycle
                ? __("On", "arraysubs")
                : __("Off", "arraysubs")}
            </strong>
            . {__("First charge (when sync is on):", "arraysubs")}{" "}
            <strong>
              {defaults.sync_first_charge_mode === "full"
                ? __("Charge the full recurring amount", "arraysubs")
                : __("Prorate until the synced renewal date", "arraysubs")}
            </strong>
            .
          </>
        ) : loadError ? (
          __("Open Renewal Settings to check the saved defaults.", "arraysubs")
        ) : (
          __("Loading renewal sync defaults…", "arraysubs")
        )}
      </p>
    </div>
  );
};

export default RenewalSyncDefaultsNotice;