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

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

      const colorPanel = (title, bgKey, textKey, linkKey) =>
        wp.element.createElement(PanelColorSettings, {
          title,
          colorSettings: [
            {
              label: "Background",
              value: attributes[bgKey],
              onChange: (value) => setAttributes({ [bgKey]: value }),
            },
            {
              label: "Text",
              value: attributes[textKey],
              onChange: (value) => setAttributes({ [textKey]: value }),
            },
            {
              label: "Link",
              value: attributes[linkKey],
              onChange: (value) => setAttributes({ [linkKey]: value }),
            },
          ],
        });

      const imageControl = (label, keyName) =>
        wp.element.createElement(
          PanelBody,
          { title: label, initialOpen: false },
          wp.element.createElement(
            MediaUploadCheck,
            null,
            wp.element.createElement(MediaUpload, {
              onSelect: (media) => setAttributes({ [keyName]: media?.url || "" }),
              allowedTypes: ["image"],
              value: attributes[keyName],
              render: ({ open }) =>
                wp.element.createElement(
                  Button,
                  { onClick: open, variant: "secondary" },
                  attributes[keyName] ? "Change image" : "Select image"
                ),
            })
          ),
          attributes[keyName]
            ? wp.element.createElement("div", { style: { marginTop: "8px" } },
                wp.element.createElement("img", {
                  src: attributes[keyName],
                  style: { width: "100%", borderRadius: "6px" },
                  alt: ""
                })
              )
            : null
        );

      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
          InspectorControls,
          null,
          imageControl("Imagen grande", "woodImage"),
          wp.element.createElement(
            PanelBody,
            { title: "Wood (texto)", initialOpen: false },
            wp.element.createElement(TextControl, {
              label: "Title",
              value: attributes.woodTitle,
              onChange: (value) => setAttributes({ woodTitle: value }),
            }),
            wp.element.createElement(TextareaControl, {
              label: "Text",
              value: attributes.woodText,
              onChange: (value) => setAttributes({ woodText: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Link text",
              value: attributes.woodLinkText,
              onChange: (value) => setAttributes({ woodLinkText: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Link URL",
              value: attributes.woodLinkUrl,
              onChange: (value) => setAttributes({ woodLinkUrl: value }),
              placeholder: "https://",
            })
          ),
          colorPanel("Wood colors", "woodCardBackground", "woodTextColor", "woodLinkColor"),
          imageControl("Imagen derecha superior", "peopleImage"),
          wp.element.createElement(
            PanelBody,
            { title: "Dark (texto)", initialOpen: false },
            wp.element.createElement(TextControl, {
              label: "Title",
              value: attributes.darkTitle,
              onChange: (value) => setAttributes({ darkTitle: value }),
            }),
            wp.element.createElement(TextareaControl, {
              label: "Text",
              value: attributes.darkText,
              onChange: (value) => setAttributes({ darkText: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Link text",
              value: attributes.darkLinkText,
              onChange: (value) => setAttributes({ darkLinkText: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Link URL",
              value: attributes.darkLinkUrl,
              onChange: (value) => setAttributes({ darkLinkUrl: value }),
              placeholder: "https://",
            })
          ),
          colorPanel("Dark colors", "darkCardBackground", "darkTextColor", "darkLinkColor"),
          wp.element.createElement(
            PanelBody,
            { title: "Modern (texto)", initialOpen: false },
            wp.element.createElement(TextControl, {
              label: "Title",
              value: attributes.modernTitle,
              onChange: (value) => setAttributes({ modernTitle: value }),
            }),
            wp.element.createElement(TextareaControl, {
              label: "Text",
              value: attributes.modernText,
              onChange: (value) => setAttributes({ modernText: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Link text",
              value: attributes.modernLinkText,
              onChange: (value) => setAttributes({ modernLinkText: value }),
            }),
            wp.element.createElement(TextControl, {
              label: "Link URL",
              value: attributes.modernLinkUrl,
              onChange: (value) => setAttributes({ modernLinkUrl: value }),
              placeholder: "https://",
            })
          ),
          colorPanel("Modern colors", "modernCardBackground", "modernTextColor", "modernLinkColor"),
          imageControl("Imagen derecha inferior", "chairImage")
        ),
        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",
              },
            },
            "Nordie Collections Grid renders on the front-end."
          )
        )
      );
    },
    save: () => null,
  });
})(window.wp);
