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

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

      const style = {};
      if (attributes.backgroundColor) {
        style.background = attributes.backgroundColor;
      }
      if (attributes.textColor) {
        style.color = attributes.textColor;
      }

      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: "Text 1",
              value: attributes.textPrimary,
              onChange: (value) => setAttributes({ textPrimary: value }),
            }),
            wp.element.createElement(ToggleControl, {
              label: "Mostrar Text 2",
              checked: attributes.showTextSecondary !== false,
              onChange: (value) => setAttributes({ showTextSecondary: value }),
            }),
            wp.element.createElement(TextareaControl, {
              label: "Text 2",
              value: attributes.textSecondary,
              onChange: (value) => setAttributes({ textSecondary: value }),
              disabled: attributes.showTextSecondary === false,
            })
          ),
          wp.element.createElement(PanelColorSettings, {
            title: "Colors",
            colorSettings: [
              {
                label: "Background",
                value: attributes.backgroundColor,
                onChange: (value) => setAttributes({ backgroundColor: value }),
              },
              {
                label: "Text",
                value: attributes.textColor,
                onChange: (value) => setAttributes({ textColor: value }),
              },
            ],
          })
        ),
        wp.element.createElement(
          "div",
          Object.assign({}, blockProps, { style }),
          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 mission text renders on the front-end."
          )
        )
      );
    },
    save: () => null,
  });
})(window.wp);
