import React from "react";
import { __, sprintf } from "@wordpress/i18n";

const LABELS = { translatepress: "TranslatePress", polylang: "Polylang" };

/**
 * Warns when TranslatePress and Polylang are both active. WordPress detaches
 * regular admin notices on screens without a heading, so the app shows the
 * same message itself (the PHP notice covers the Plugins screen).
 */
const TranslationConflictNotice = () => {
  const translations = window.arraySubs?.env?.translations;
  if (!translations?.conflict) {
    return null;
  }

  return (
    <div className="notice notice-warning inline arraysubs-translation-conflict-notice">
      <p>
        {sprintf(
          /* translators: %s: name of the multilingual plugin ArraySubs is using. */
          __(
            "ArraySubs translates saved text with one multilingual plugin at a time. TranslatePress and Polylang are both active, so ArraySubs is using %s. Deactivate one of them.",
            "arraysubs",
          ),
          LABELS[translations.provider] || LABELS.translatepress,
        )}
      </p>
    </div>
  );
};

export default TranslationConflictNotice;