/**
 * EditorBadge — Unified badge overlay for block editor
 *
 * Reads from multiple badge sources (hover animation, trigger, responsive)
 * and renders badges via data attributes + CSS ::before/::after.
 *
 * ::before (left) = animation + responsive labels
 * ::after (right) = trigger label
 *
 * Uses display:block on pseudo-elements to work inside contenteditable.
 * Uses data attributes + attr() (same technique as ResponsiveConditions).
 *
 * Priority 5: runs innermost so wrapperProps aren't overwritten by outer HOCs.
 */
(function () {
  var el = wp.element.createElement;
  var addFilter = wp.hooks.addFilter;
  var createHigherOrderComponent = wp.compose.createHigherOrderComponent;

  // ── Animation type → label mapping (static lookup) ────────────
  // Keep in sync with ANIMATION_TYPES in HoverAnimation/script.js

  // ── Display animation type → label mapping ─────────────────────
  // Keep in sync with buildAnimationOptions() in DisplayAnimation/editor-script.js

  var DISPLAY_ANIMATION_LABELS = {
    "fade_in_down": "Fade In Down",
    "fade_in_up": "Fade In Up",
    "fade_in_left": "Fade In Left",
    "fade_in_right": "Fade In Right",
    "slide_in_left": "Slide In Left",
    "slide_in_right": "Slide In Right",
    "slide_out_left": "Slide Out Left",
    "slide_out_right": "Slide Out Right",
    "bounce": "Bounce",
    "bounce_in": "Bounce In",
    "scale_down": "Scale Down",
    "scale_up": "Scale Up",
    "zoom_in": "Zoom In",
    "zoom_out": "Zoom Out",
    "slide_text_up": "Slide Text Up",
    "slide_text_left": "Slide Text Left",
    "slide_text_right": "Slide Text Right",
  };

  // ── Hover animation type → label mapping (static lookup) ──────

  var ANIMATION_LABELS = {
    "fly-up": "Fly Up",
    "fly-down": "Fly Down",
    "fly-left": "Fly Left",
    "fly-right": "Fly Right",
    "zoom-in": "Zoom In",
    "zoom-out": "Zoom Out",
    "fade": "Fade",
    "fade-in": "Fade In",
    "fade-in-up": "Fade In Up",
    "fade-in-down": "Fade In Down",
    "fade-in-left": "Fade In Left",
    "fade-in-right": "Fade In Right",
    "fade-out": "Fade Out",
    "rotate-cw": "Rotate CW",
    "rotate-ccw": "Rotate CCW",
    "bounce": "Bounce",
    "pulse": "Pulse",
    "skew": "Skew",
    "color-overlay": "Color Overlay",
    "underline": "Underline",
    "text-underline": "Text Underline",
    "text-underline-slide": "Text Underline Slide",
    "image-zoom": "Image Zoom",
  };

  // ── Unified badge HOC ─────────────────────────────────────────

  var addEditorBadge = createHigherOrderComponent(
    function (BlockListBlock) {
      return function (props) {
        var attributes = props.attributes;

        // 1. Left badge parts (display anim + hover anim + responsive)
        var leftParts = [];

        // Display animation (scroll-triggered, shows first)
        var style = attributes.style || {};
        var displayAnim = style.displayAnimation || {};
        var displayType = displayAnim.type || "none";
        if (displayType !== "none" && DISPLAY_ANIMATION_LABELS[displayType]) {
          leftParts.push("\u2728 " + DISPLAY_ANIMATION_LABELS[displayType]);
        }

        // Hover animation
        var hoverAnim = attributes.hoverAnimation || {};
        var animType = hoverAnim.type || "";
        if (animType && ANIMATION_LABELS[animType]) {
          leftParts.push("\u2726 Hover: " + ANIMATION_LABELS[animType]);
        }
        // Reads BOTH legacy hideOn* attrs AND (on WP 7.0+) native
        // metadata.blockVisibility.viewport.* via the shared bridge helper,
        // so the badge stays consistent with the toolbar pressed state.
        var rcHelpers = window.BrandyResponsiveConditionsHelpers;
        var isHiddenForDevice = rcHelpers && rcHelpers.isHiddenForDevice;
        var hideDevices = [];
        if (isHiddenForDevice) {
          if (isHiddenForDevice(attributes, "hideOnDesktop")) hideDevices.push("Desktop");
          if (isHiddenForDevice(attributes, "hideOnTablet")) hideDevices.push("Tablet");
          if (isHiddenForDevice(attributes, "hideOnMobile")) hideDevices.push("Mobile");
        } else {
          if (attributes.hideOnDesktop) hideDevices.push("Desktop");
          if (attributes.hideOnTablet) hideDevices.push("Tablet");
          if (attributes.hideOnMobile) hideDevices.push("Mobile");
        }
        if (hideDevices.length > 0) {
          leftParts.push("Hide on: " + hideDevices.join(", "));
        }

        // 2. Right badge (trigger only)
        var hasTrigger = !!attributes.hoverAnimationTrigger;

        // No badge needed
        if (leftParts.length === 0 && !hasTrigger) {
          return el(BlockListBlock, props);
        }

        // Build data attributes
        var existingClassName = props.className || "";
        var newClassName = (existingClassName + " has-brandy-editor-badge").trim();
        var wrapperProps = props.wrapperProps || {};
        var dataAttrs = {};

        if (leftParts.length > 0) {
          dataAttrs["data-brandy-badge"] = leftParts.join(" \u00B7 ");
        }
        if (hasTrigger) {
          dataAttrs["data-brandy-trigger"] = "\u26A1 Trigger hover";
        }

        return el(
          BlockListBlock,
          Object.assign({}, props, {
            className: newClassName,
            wrapperProps: Object.assign({}, wrapperProps, dataAttrs),
          })
        );
      };
    },
    "addEditorBadge"
  );

  // ── Register filter ───────────────────────────────────────────

  addFilter(
    "editor.BlockListBlock",
    "brandy/editor-badge",
    addEditorBadge,
    5
  );
})();
