import { createHigherOrderComponent } from "@wordpress/compose";
import classNames from "classnames";
import { addFilter } from "@wordpress/hooks";

const applyHoverClasses = createHigherOrderComponent((BlockListBlock) => {
  return (props) => {
    const { attributes } = props;
    const {
      blynexHoverEffect,
      blynexHoverIntensity = 0.5,
      blynexHoverScale = 1.05,
      blynexHoverDuration = 0.3,
    } = attributes;

    const wrapperProps = {
      ...props.wrapperProps,
      className: classNames(props?.wrapperProps?.className, {
        [`blynex-hover-${blynexHoverEffect}`]:
          blynexHoverEffect && blynexHoverEffect !== "none",
        "blynex-hover-enabled": true,
      }),
      style: {
        "--blynex-intensity": blynexHoverIntensity,
        "--blynex-duration": `${blynexHoverDuration}s`,
        "--blynex-scale": blynexHoverScale,
      },
    };
    return <BlockListBlock {...props} wrapperProps={wrapperProps} />;
  };
}, "applyHoverClasses");

addFilter(
  "editor.BlockListBlock",
  "blynex/hover-effect-classes",
  applyHoverClasses
);