(function (wp) {
    
    const { registerBlockType } = wp.blocks;
    const { createElement: el } = wp.element;
    
    registerBlockType("allspice/inline-chat", {
        title: "Allspice Inline Chat",
        icon: "format-chat",
        category: "widgets",
        edit: function () {
            return el(
                      "div",
                      { style: { border: "1px dashed #ddd", padding: "12px" } },
                      el("strong", {}, "Allspice Inline Chat"),
                      el("div", { style: { marginTop: "8px", opacity: 0.75 } }, "Renders the Inline Chat section (premade).")
                      );
        },
        save: function () {
            return null;
        },
    });
})(window.wp);


// (function (wp) {
//   const { registerBlockType } = wp.blocks;
//   const { InspectorControls } = wp.blockEditor || wp.editor;
//   const { PanelBody, RangeControl } = wp.components;
//   const { createElement: el } = wp.element;
//
//   registerBlockType("allspice/inline-chat", {
//     title: "Allspice Inline Chat",
//     icon: "format-chat",
//     category: "widgets",
//     attributes: {
//       id: { type: "string", default: "WIDCON-h6ia" },
//       reserve_w: { type: "number", default: 720 },
//       reserve_h: { type: "number", default: 300 },
//     },
//     edit: function (props) {
//       const { attributes, setAttributes } = props;
//       const { reserve_w, reserve_h } = attributes;
//       const previewStyle = {
//         border: "1px dashed #ddd",
//         padding: "12px",
//       };
//       return el(
//         "div",
//         { style: previewStyle },
//         el(
//           InspectorControls,
//           {},
//           el(
//             PanelBody,
//             { title: "Inline Chat Settings", initialOpen: true },
//             el(RangeControl, {
//               label: "Reserve Height (px)",
//               value: reserve_h,
//               min: 220,
//               max: 700,
//               onChange: (v) => setAttributes({ reserve_h: v || 300 }),
//             }),
//             el(RangeControl, {
//               label: "Reserve Width (px)",
//               value: reserve_w,
//               min: 260,
//               max: 1200,
//               onChange: (v) => setAttributes({ reserve_w: v || 720 }),
//             })
//           )
//         ),
//         el("strong", {}, "Preview"),
//         el(
//           "div",
//           { style: { marginTop: "8px", opacity: 0.8 } },
//           `Renders: [allspice_button id="WIDCON-h6ia" reserve_w="${reserve_w}" reserve_h="${reserve_h}"] (fixed)`
//         )
//       );
//     },
//     save: function () {
//       return null;
//     },
//   });
// })(window.wp);