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

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

      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
          InspectorControls,
          null,
          wp.element.createElement(
            PanelBody,
            { title: "Content", initialOpen: true },
            wp.element.createElement(TextareaControl, {
              label: "Title",
              value: attributes.title,
              onChange: (value) => setAttributes({ title: value }),
            }),
            wp.element.createElement(TextareaControl, {
              label: "Subtitle",
              value: attributes.text,
              onChange: (value) => setAttributes({ text: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Button text",
              value: attributes.linkText,
              onChange: (value) => setAttributes({ linkText: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Button URL",
              value: attributes.linkUrl,
              onChange: (value) => setAttributes({ linkUrl: value }),
              placeholder: "https://",
            })
          ),
          wp.element.createElement(
            PanelBody,
            { title: "Image", initialOpen: false },
            wp.element.createElement(
              MediaUploadCheck,
              null,
              wp.element.createElement(MediaUpload, {
                onSelect: (media) => setAttributes({ imageUrl: media?.url || "" }),
                allowedTypes: ["image"],
                value: attributes.imageUrl,
                render: ({ open }) =>
                  wp.element.createElement(
                    Button,
                    { onClick: open, variant: "secondary" },
                    attributes.imageUrl ? "Change image" : "Select image"
                  ),
              })
            ),
            attributes.imageUrl
              ? wp.element.createElement(
                  "div",
                  { style: { marginTop: "8px" } },
                  wp.element.createElement("img", {
                    src: attributes.imageUrl,
                    style: { width: "100%", borderRadius: "6px" },
                    alt: "",
                  })
                )
              : null,
            wp.element.createElement(TextControl, {
              label: "Image alt",
              value: attributes.imageAlt,
              onChange: (value) => setAttributes({ imageAlt: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Tag text",
              value: attributes.tagText,
              onChange: (value) => setAttributes({ tagText: value }),
            })
          ),
          wp.element.createElement(PanelColorSettings, {
            title: "Colors",
            colorSettings: [
              {
                label: "Card background",
                value: attributes.cardBackground,
                onChange: (value) => setAttributes({ cardBackground: value }),
              },
              {
                label: "Text",
                value: attributes.textColor,
                onChange: (value) => setAttributes({ textColor: value }),
              },
              {
                label: "Link",
                value: attributes.linkColor,
                onChange: (value) => setAttributes({ linkColor: value }),
              },
            ],
          })
        ),
        wp.element.createElement(
          "div",
          blockProps,
          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",
              },
            },
            "About hero renders on the front-end."
          )
        )
      );
    },
    save: () => null,
  });
})(window.wp);
