/** Default/custom denial message control shared by content restriction editors. */
import { ToggleControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import RichTextField from "@libs/form-builder/fields/RichText";
import DefaultMessageHelp from "./DefaultMessageHelp";

export default function RestrictionMessageField({
  config,
  update,
  contentGateUrl,
  placeholder = "",
}) {
  const useDefaultMessage = config.useDefaultMessage !== false;

  return (
    <div className="arraysubs-restriction-message">
      <ToggleControl
        __nextHasNoMarginBottom
        label={__("Use custom message", "arraysubs")}
        help={__("When off, the default message is shown.", "arraysubs")}
        checked={!useDefaultMessage}
        onChange={(value) => update({ useDefaultMessage: !value })}
      />
      <p className="arraysubs-restriction-message__help">
        <DefaultMessageHelp url={contentGateUrl} />
      </p>
      {!useDefaultMessage && (
        <RichTextField
          standalone
          translatable
          height={180}
          toolbar="bold italic | bullist numlist | link unlink | removeformat"
          label={__("Custom message", "arraysubs")}
          help={__("Shown when access is denied. Leave empty to use the default message.", "arraysubs")}
          value={config.message || ""}
          placeholder={placeholder}
          onChange={(message) => update({ message })}
        />
      )}
    </div>
  );
}