function isFeaturedImageBlock(name) {
  return name === "core/post-featured-image";
}

/** Register attribute */
function addFeaturedImagePlaceholderAttributes(settings) {
  if (typeof settings.attributes === "undefined") {
    return settings;
  }
  if (!isFeaturedImageBlock(settings)) {
    return settings;
  }
  settings.attributes = Object.assign(settings.attributes, {
    showPlaceholder: {
      type: "boolean",
      default: true,
    },
  });

  return settings;
}

wp.hooks.addFilter(
  "blocks.registerBlockType",
  "brandy-blocks/featured-image-placeholder-attribute",
  addFeaturedImagePlaceholderAttributes
);

/** Display controls */

const FeaturedImagePlaceholderControls = wp.compose.createHigherOrderComponent(
  (BlockEdit) => {
    return (props) => {
      const { Fragment } = wp.element;
      const { ToggleControl, PanelBody } = wp.components;
      const { InspectorControls } = wp.blockEditor;
      const { isSelected, attributes, setAttributes, name } = props;
      const canAddSettings = isFeaturedImageBlock(name);

      return React.createElement(
        Fragment,
        null,
        React.createElement(BlockEdit, props),
        isSelected &&
          canAddSettings &&
          React.createElement(
            InspectorControls,
            null,
            React.createElement(
              PanelBody,
              {
                title: wp.i18n.__("Placeholder", "brandy"),
              },
              React.createElement(ToggleControl, {
                label: wp.i18n.__(
                  "Show placeholder when not have image",
                  "brandy"
                ),
                checked: attributes?.showPlaceholder ?? true,
                onChange: (value) => {
                  setAttributes({
                    showPlaceholder: value,
                  });
                },
              })
            )
          )
      );
    };
  },
  "FeaturedImagePlaceholderControls"
);

wp.hooks.addFilter(
  "editor.BlockEdit",
  "brandy-blocks/featured-image-placeholder-controls",
  FeaturedImagePlaceholderControls
);

// const addExternalButtonStyle = wp.compose.createHigherOrderComponent(
//   (BlockListBlock) => {
//     return (props) => {
//       const { attributes } = props;
//       const extraWrapperProps = props.wrapperProps ?? {};
//       if (isBlockHasHoverBorderAttribute(attributes)) {
//         extraWrapperProps.style = {
//           ...extraWrapperProps.style,
//           ...getStyleFromAttributes(attributes),
//         };
//       }
//       return (
//         <BlockListBlock {...props} wrapperProps={{ ...extraWrapperProps }} />
//       );
//     };
//   },
//   "addExternalButtonStyle"
// );

// wp.hooks.addFilter(
//   "editor.BlockListBlock",
//   "brandy-blocks/external-button-settings",
//   addExternalButtonStyle
// );

// /**
//  * Save function
//  */
// function addButtonSettingsProps(props, blockType, attributes) {
//   if (!isBlockSupportBorder(blockType)) {
//     return props;
//   }

//   props.style = {
//     ...props.style,
//     ...getStyleFromAttributes(attributes),
//   };

//   return props;
// }

// wp.hooks.addFilter(
//   "blocks.getSaveContent.extraProps",
//   "brandy-blocks/button-settings-props",
//   addButtonSettingsProps,
//   100,
//   3
// );

// function getStyleFromAttributes(attributes) {
//   const style = {};

//   if (Object.keys(attributes.hoverBorder ?? {}).length > 0) {
//     if (Object.keys(attributes.hoverBorder ?? {}).includes("top")) {
//       ["top", "bottom", "left", "right"].forEach((aspect) => {
//         style[`--button-hover-border-${aspect}-c`] =
//           attributes.hoverBorder[aspect].color;
//         style[`--button-hover-border-${aspect}-w`] =
//           attributes.hoverBorder[aspect].width;
//         style[`--button-hover-border-${aspect}-s`] =
//           attributes.hoverBorder[aspect].style;
//       });
//     } else {
//       style[`--button-hover-border-c`] = attributes.hoverBorder.color;
//       style[`--button-hover-border-w`] = attributes.hoverBorder.width;
//       style[`--button-hover-border-s`] = attributes.hoverBorder.style;
//     }
//   }

//   return style;
// }