(function (wp) {
  const { registerBlockType } = wp.blocks;
  const { InspectorControls, InnerBlocks, PanelColorSettings, useBlockProps } = wp.blockEditor;

  const TEMPLATE = [
    ["fjord/info-item", { iconType: "truck", text: "Free Shipping over 500€" }],
    ["fjord/info-item", { iconType: "globe", text: "Worldwide Shipping" }],
    ["fjord/info-item", { iconType: "box", text: "Free Returns" }],
    ["fjord/info-item", { iconType: "warranty", text: "5-Year Warranty" }],
  ];

  registerBlockType("fjord/info-bar", {
    edit: (props) => {
      const { attributes, setAttributes } = props;
      const blockProps = useBlockProps({ className: "fjord-info fjord-reveal" });

      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
          InspectorControls,
          null,
          wp.element.createElement(PanelColorSettings, {
            title: "Background",
            colorSettings: [
              {
                label: "Background",
                value: attributes.backgroundColor,
                onChange: (value) => setAttributes({ backgroundColor: value }),
              },
              {
                label: "Text",
                value: attributes.textColor,
                onChange: (value) => setAttributes({ textColor: value }),
              },
              {
                label: "Icon",
                value: attributes.iconColor,
                onChange: (value) => setAttributes({ iconColor: value }),
              },
            ],
          })
        ),
        wp.element.createElement(
          "div",
          blockProps,
          wp.element.createElement(
            "div",
            { className: "fjord-info__inner" },
            wp.element.createElement(InnerBlocks, {
              allowedBlocks: ["fjord/info-item"],
              template: TEMPLATE,
              templateLock: false,
            })
          )
        )
      );
    },
    save: () => wp.element.createElement(InnerBlocks.Content, null),
  });
})(window.wp);
