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

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

      const pillStyle = {};
      if (attributes.pillBackground) {
        pillStyle.background = attributes.pillBackground;
      }
      if (attributes.pillTextColor) {
        pillStyle.color = attributes.pillTextColor;
      }
      if (attributes.pillBorderColor) {
        pillStyle.borderColor = attributes.pillBorderColor;
      }

      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
          InspectorControls,
          null,
          wp.element.createElement(
            PanelBody,
            { title: "Title", initialOpen: true },
            wp.element.createElement(TextControl, {
              label: "Favorites title",
              value: attributes.favoritesTitle,
              onChange: (value) => setAttributes({ favoritesTitle: value }),
            })
          ),
          wp.element.createElement(PanelColorSettings, {
            title: "Pill colors",
            colorSettings: [
              {
                label: "Background",
                value: attributes.pillBackground,
                onChange: (value) => setAttributes({ pillBackground: value }),
              },
              {
                label: "Text",
                value: attributes.pillTextColor,
                onChange: (value) => setAttributes({ pillTextColor: value }),
              },
              {
                label: "Border",
                value: attributes.pillBorderColor,
                onChange: (value) => setAttributes({ pillBorderColor: value }),
              },
            ],
          })
        ),
        wp.element.createElement(
          "div",
          blockProps,
          wp.element.createElement(
            "div",
            { className: "fjord-favorites__pill", style: pillStyle },
            wp.element.createElement("h2", null, attributes.favoritesTitle || "Our Favorites")
          ),
          wp.element.createElement(
            "div",
            {
              style: {
                border: "1px dashed rgba(14,16,17,0.25)",
                borderRadius: "12px",
                padding: "24px",
                textAlign: "center",
                color: "rgba(14,16,17,0.6)",
                fontSize: "13px",
              },
            },
            "Favorites carousel renders on the front-end."
          ),
          null
        )
      );
    },
    save: () => null,
  });
})(window.wp);
