import React, { useId } from "react";
import { __ } from "@wordpress/i18n";
import RichTextField from "@libs/form-builder/fields/RichText";
import DefaultMessageHelp from "./DefaultMessageHelp";
import "./rule-message-field.scss";

const RuleMessageField = ({ rule, updateRule, help, ...editorProps }) => {
  const id = useId();
  const enabled = rule.custom_message_enabled === true;

  return (
    <div className="arraysubs-rule-field arraysubs-rule-message">
      <label className="arraysubs-rule-message__switch" htmlFor={id}>
        <span className="arraysubs-rule-builder__rule-toggle">
          <input
            id={id}
            type="checkbox"
            role="switch"
            checked={enabled}
            aria-checked={enabled}
            aria-describedby={`${id}-help`}
            onChange={(event) =>
              updateRule({ custom_message_enabled: event.target.checked })
            }
          />
          <span className="arraysubs-rule-builder__toggle-slider" />
        </span>
        {__("Use custom message", "arraysubs")}
      </label>
      <p id={`${id}-help`} className="arraysubs-rule-field__help">
        {__("When off, the default message is shown.", "arraysubs")}{" "}
        <DefaultMessageHelp />
      </p>
      {enabled && (
        <>
          <RichTextField
            standalone
            translatable
            label={__("Custom message", "arraysubs")}
            height={180}
            toolbar="bold italic | bullist numlist | link unlink | removeformat"
            {...editorProps}
            value={rule.message || ""}
            onChange={(message) => updateRule({ message })}
          />
          {help && <p className="arraysubs-rule-field__help">{help}</p>}
        </>
      )}
    </div>
  );
};

export default RuleMessageField;