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

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

      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
          InspectorControls,
          null,
          wp.element.createElement(
            PanelBody,
            { title: "Content", initialOpen: true },
            wp.element.createElement(TextControl, {
              label: "Title",
              value: attributes.title,
              onChange: (value) => setAttributes({ title: value }),
            }),
            wp.element.createElement(TextareaControl, {
              label: "Form shortcode",
              value: attributes.formShortcode,
              onChange: (value) => setAttributes({ formShortcode: value }),
              help: "Paste the Contact Form 7 shortcode",
            })
          ),
          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(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: "Form background",
                value: attributes.inputBackground,
                onChange: (value) => setAttributes({ inputBackground: value }),
              },
              {
                label: "Form text",
                value: attributes.inputText,
                onChange: (value) => setAttributes({ inputText: value }),
              },
              {
                label: "Form border",
                value: attributes.inputBorder,
                onChange: (value) => setAttributes({ inputBorder: value }),
              },
              {
                label: "Button background form",
                value: attributes.buttonBackground,
                onChange: (value) => setAttributes({ buttonBackground: value }),
              },
              {
                label: "Button text form",
                value: attributes.buttonText,
                onChange: (value) => setAttributes({ buttonText: value }),
              },
            ],
          }),
          wp.element.createElement(
            PanelBody,
            { title: "Prague content", initialOpen: true },
            wp.element.createElement(TextControl, {
              label: "City name",
              value: attributes.city1,
              onChange: (value) => setAttributes({ city1: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Address",
              value: attributes.address1,
              onChange: (value) => setAttributes({ address1: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Button text",
              value: attributes.cta1,
              onChange: (value) => setAttributes({ cta1: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Button link",
              value: attributes.link1,
              onChange: (value) => setAttributes({ link1: value }),
            })
          ),
          wp.element.createElement(
            PanelColorSettings,
            {
              title: "Prague colors",
              colorSettings: [
                {
                  label: "Block background",
                  value: attributes.backgroundColor1,
                  onChange: (value) => setAttributes({ backgroundColor1: value }),
                },
                {
                  label: "Text color",
                  value: attributes.textColor1,
                  onChange: (value) => setAttributes({ textColor1: value }),
                },
                {
                  label: "Button background",
                  value: attributes.buttonColor1,
                  onChange: (value) => setAttributes({ buttonColor1: value }),
                },
                {
                  label: "Button text",
                  value: attributes.buttonTextColor1,
                  onChange: (value) => setAttributes({ buttonTextColor1: value }),
                },
              ],
            }
          ),
          wp.element.createElement(
            PanelBody,
            { title: "Hamburg content", initialOpen: false },
            wp.element.createElement(TextControl, {
              label: "City name",
              value: attributes.city2,
              onChange: (value) => setAttributes({ city2: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Address",
              value: attributes.address2,
              onChange: (value) => setAttributes({ address2: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Button text",
              value: attributes.cta2,
              onChange: (value) => setAttributes({ cta2: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Button link",
              value: attributes.link2,
              onChange: (value) => setAttributes({ link2: value }),
            })
          ),
          wp.element.createElement(
            PanelColorSettings,
            {
              title: "Hamburg colors",
              colorSettings: [
                {
                  label: "Block background",
                  value: attributes.backgroundColor2,
                  onChange: (value) => setAttributes({ backgroundColor2: value }),
                },
                {
                  label: "Text color",
                  value: attributes.textColor2,
                  onChange: (value) => setAttributes({ textColor2: value }),
                },
                {
                  label: "Button background",
                  value: attributes.buttonColor2,
                  onChange: (value) => setAttributes({ buttonColor2: value }),
                },
                {
                  label: "Button text",
                  value: attributes.buttonTextColor2,
                  onChange: (value) => setAttributes({ buttonTextColor2: 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",
              },
            },
            "Contact hero renders on the front-end."
          )
        )
      );
    },
    save: () => null,
  });
})(window.wp);
