import { memo } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { NextToggleControl } from "./NextControls";


/**
 * Additional invalidation rules panel shown per configured post type tab.
 */
function PropagationPanel({
  propagation,
  onChange,
  tagsEnabled = false,
  onTagsEnabledChange,
  disabled = false,
}) {
  const {
    taxonomies_enabled = true,
  } = propagation;

  const update = (key, value) => {
    onChange({ ...propagation, [key]: value });
  };

  return (
      <>
          <div className='settings-inner-container'>
              <div className='settings-inner-container__item'>
                  <NextToggleControl
                      label={__("Taxonomy propagation", "cache-autopilot")}
                      help={__(
                          "Invalidate affected posts when terms are updated or reassigned.",
                          "cache-autopilot",
                      )}
                      checked={taxonomies_enabled}
                      onChange={(val) => update("taxonomies_enabled", val)}
                      disabled={disabled}
                  />
              </div>
              <div className='settings-inner-container__item'>
                  <NextToggleControl
                      label={__("Include tags (post_tag)", "cache-autopilot")}
                      help={__(
                          "Allow tags to participate in invalidation and propagation for this post type.",
                          "cache-autopilot",
                      )}
                      checked={!!tagsEnabled}
                      onChange={(val) => onTagsEnabledChange?.(!!val)}
                      disabled={disabled}
                  />
              </div>
          </div>
      </>
  );
}

export default memo(PropagationPanel);
