(function (wp) {
    const { registerBlockType } = wp.blocks;
    const { createElement: el, Fragment } = wp.element;
    const { InspectorControls } = wp.blockEditor || wp.editor;
    const { PanelBody, RangeControl } = wp.components;
    registerBlockType("allspice/inline-overview-style-1", {
        title: "Allspice Inline Overview Style 1",
        icon: "search",
        category: "widgets",
        attributes: {
            pad_top: { type: "number", default: 16 },
            pad_bottom: { type: "number", default: 16 },
        },
        edit: function (props) {
            const { attributes, setAttributes } = props;
            const padTop = typeof attributes.pad_top === "number" ? attributes.pad_top : 16;
            const padBottom = typeof attributes.pad_bottom === "number" ? attributes.pad_bottom : 16;
            return el(
                      Fragment,
                      {},
                      el(
                         InspectorControls,
                         {},
                         el(
                            PanelBody,
                            { title: "Spacing", initialOpen: true },
                            el(RangeControl, {
                                label: "Top padding (px)",
                                value: padTop,
                                min: 0,
                                max: 80,
                                step: 1,
                                onChange: function (v) {
                                    setAttributes({ pad_top: v });
                                },
                            }),
                            el(RangeControl, {
                                label: "Bottom padding (px)",
                                value: padBottom,
                                min: 0,
                                max: 80,
                                step: 1,
                                onChange: function (v) {
                                    setAttributes({ pad_bottom: v });
                                },
                            })
                            )
                         ),
                      el(
                         "div",
                         {
                             style: {
                                 border: "1px dashed #ddd",
                                 padding: "12px",
                                 borderRadius: "6px",
                             },
                         },
                         el("strong", {}, "Allspice Inline Overview Style 1"),
                         el(
                            "div",
                            { style: { marginTop: "8px", opacity: 0.75 } },
                            "Renders the Inline Overview Style 1 section (premade)."
                            ),
                         el(
                            "div",
                            {
                                style: {
                                    marginTop: "12px",
                                    background: "#fafafa",
                                    border: "1px solid #eee",
                                    paddingTop: padTop + "px",
                                    paddingBottom: padBottom + "px",
                                    paddingLeft: "12px",
                                    paddingRight: "12px",
                                    borderRadius: "6px",
                                    opacity: 0.9,
                                },
                            },
                            el("div", { style: { fontSize: "12px", opacity: 0.8 } }, "Preview spacing"),
                            el("div", { style: { marginTop: "6px" } }, "Overview will render on the front-end.")
                            )
                         )
                      );
        },
        save: function () {
            return null;
        },
    });
})(window.wp);