(function (blocks, editor, element, components, $) {
    const { createElement: el, Fragment, useEffect } = wp.element;
    const {
        TextControl,
        ToggleControl,
        TextareaControl,
        __experimentalUnitControl: UnitControl,
        __experimentalNumberControl: NumberControl,
        __experimentalBoxControl: BoxControl,
        __experimentalRadioGroup: RadioGroup,
        __experimentalRadio: Radio,
        Panel,
        PanelBody,
        InspectorControls,
        Button
    } = components;

    // Helper function to recursively search an object/array for all objects that contain a given key.
    const deepSearchByKey = (obj, key, matches = []) => {
        if (obj == null) return matches;
        if (Array.isArray(obj)) {
            obj.forEach((item) => deepSearchByKey(item, key, matches));
        } else if (typeof obj === "object") {
            Object.keys(obj).forEach((k) => {
                if (k === key) {
                    matches.push(obj);
                } else {
                    deepSearchByKey(obj[k], key, matches);
                }
            });
        }
        return matches;
    };

    // Build a style string based on the block attributes.
    function blockStyleBackend(props) {
        // Use the block’s "width" attribute if available.
        if (typeof props.attributes.width !== "undefined") {
            props.attributes.width_desktop = props.attributes.width;
        }
        if (props.attributes.layout?.contentSize) {
            props.attributes.width_desktop = props.attributes.layout.contentSize;
        }

        // Determine the block’s CSS selector.
        let blockSelector = `#block-${props.clientId}`;
        if (props.name === "stepfox/casino-query-block") {
            blockSelector = `#block_${props.attributes.customId}`;
        }

        // Determine display overrides based on tri‑state attributes.
        const hideDesktopCSS =
            props.attributes.hide_desktop === "hide"
                ? "display: none !important;"
                : props.attributes.hide_desktop === "show"
                    ? "display: flex !important;"
                    : "";
        const hideTabletCSS =
            props.attributes.hide_tablet === "hide"
                ? "display: none !important;"
                : props.attributes.hide_tablet === "show"
                    ? "display: flex !important;"
                    : "";
        const hideMobileCSS =
            props.attributes.hide_mobile === "hide"
                ? "display: none !important;"
                : props.attributes.hide_mobile === "show"
                    ? "display: flex !important;"
                    : "";
        const gap = props.attributes.style?.spacing?.blockGap || "";

        // Build CSS rules for desktop, tablet, and mobile.
        const desktopAttributes = `
      {
        ${hideDesktopCSS}
        order: ${props.attributes.order_desktop} !important;
        width: ${props.attributes.width_desktop} !important;
        gap: ${gap} !important;
        flex-basis: ${props.attributes.width_desktop} !important;
        font-size: ${props.attributes.font_size_desktop} !important;
        line-height: ${props.attributes.line_height_desktop} !important;
        padding-top: ${props.attributes.desktop_padding.top} !important;
        padding-left: ${props.attributes.desktop_padding.left} !important;
        padding-bottom: ${props.attributes.desktop_padding.bottom} !important;
        padding-right: ${props.attributes.desktop_padding.right} !important;
        margin-top: ${props.attributes.desktop_margin.top} !important;
        margin-left: ${props.attributes.desktop_margin.left} !important;
        margin-bottom: ${props.attributes.desktop_margin.bottom} !important;
        margin-right: ${props.attributes.desktop_margin.right} !important;
        border-top-width: ${props.attributes.desktop_border.top} !important;
        border-left-width: ${props.attributes.desktop_border.left} !important;
        border-bottom-width: ${props.attributes.desktop_border.bottom} !important;
        border-right-width: ${props.attributes.desktop_border.right} !important;
      }
    `;
        const tabletAttributes = `
      {
        ${hideTabletCSS}
        text-align: ${props.attributes.text_align_tablet} !important;
        justify-content: ${props.attributes.justify_tablet} !important;
        order: ${props.attributes.order_tablet} !important;
        width: ${props.attributes.width_tablet} !important;
        flex-basis: calc(${props.attributes.width_tablet} - var(--wp--style--block-gap)) !important;
        font-size: ${props.attributes.font_size_tablet} !important;
        line-height: ${props.attributes.line_height_tablet} !important;
        padding-top: ${props.attributes.tablet_padding.top} !important;
        padding-left: ${props.attributes.tablet_padding.left} !important;
        padding-bottom: ${props.attributes.tablet_padding.bottom} !important;
        padding-right: ${props.attributes.tablet_padding.right} !important;
        margin-top: ${props.attributes.tablet_margin.top} !important;
        margin-left: ${props.attributes.tablet_margin.left} !important;
        margin-bottom: ${props.attributes.tablet_margin.bottom} !important;
        margin-right: ${props.attributes.tablet_margin.right} !important;
        border-top-width: ${props.attributes.tablet_border.top} !important;
        border-left-width: ${props.attributes.tablet_border.left} !important;
        border-bottom-width: ${props.attributes.tablet_border.bottom} !important;
        border-right-width: ${props.attributes.tablet_border.right} !important;
      }
    `;
        const mobileAttributes = `
      {
        ${hideMobileCSS}
        text-align: ${props.attributes.text_align_mobile} !important;
        justify-content: ${props.attributes.justify_mobile} !important;
        order: ${props.attributes.order_mobile} !important;
        width: ${props.attributes.width_mobile} !important;
        flex-basis: calc(${props.attributes.width_mobile} - var(--wp--style--block-gap)) !important;
        font-size: ${props.attributes.font_size_mobile} !important;
        line-height: ${props.attributes.line_height_mobile} !important;
        padding-top: ${props.attributes.mobile_padding.top} !important;
        padding-left: ${props.attributes.mobile_padding.left} !important;
        padding-bottom: ${props.attributes.mobile_padding.bottom} !important;
        padding-right: ${props.attributes.mobile_padding.right} !important;
        margin-top: ${props.attributes.mobile_margin.top} !important;
        margin-left: ${props.attributes.mobile_margin.left} !important;
        margin-bottom: ${props.attributes.mobile_margin.bottom} !important;
        margin-right: ${props.attributes.mobile_margin.right} !important;
        border-top-width: ${props.attributes.mobile_border.top} !important;
        border-left-width: ${props.attributes.mobile_border.left} !important;
        border-bottom-width: ${props.attributes.mobile_border.bottom} !important;
        border-right-width: ${props.attributes.mobile_border.right} !important;
      }
    `;
        return `<style>
      ${blockSelector} ${desktopAttributes}
      @media screen and (max-width:1024px) {
        ${blockSelector} ${tabletAttributes}
      }
      @media screen and (max-width:768px) {
        ${blockSelector} ${mobileAttributes}
      }
      ${props.attributes.custom_css.replaceAll("this_block", blockSelector)}
    </style>`;
    }

    // Higher Order Component to add Inspector Controls.
    const withInspectorControls = wp.compose.createHigherOrderComponent((BlockEdit) => {
        return (props) => {
            // Update customId based on the anchor attribute.
            if (props.attributes.anchor) {
                if (props.attributes.anchor.length > 0) {
                    props.setAttributes({ customId: `anchor_${props.attributes.anchor}` });
                }
            } else if (
                props.attributes.anchor === "" &&
                props.attributes.customId &&
                props.attributes.customId.includes("anchor_")
            ) {
                props.setAttributes({ customId: "stepfox-not-set-id" });
            }

            wp.domReady(() => {
                const allBlocks = Object.entries(
                    wp.data.select("core/block-editor").getBlocks()
                );
                const blocksWithCustomId = deepSearchByKey(allBlocks, "customId");
                const blocksIds = blocksWithCustomId.map((item) => item.customId);
                const findDuplicates = (arr) =>
                    arr.filter((item, index) => arr.indexOf(item) !== index);

                $(document).on("click", ".block-editor-post-preview__button-resize", () => {
                    blockStyleBackend(props);
                });

                if (
                    !props.attributes.customId ||
                    props.attributes.customId === "stepfox-not-set-id" ||
                    findDuplicates(blocksIds).includes(props.attributes.customId)
                ) {
                    const blockId = props.clientId.slice(0, 6);
                    props.setAttributes({ customId: blockId });
                }
            });

            // Function to run custom JS from the custom_js attribute.
            const runCustomJS = () => {
                let blockSelector = `#block-${props.clientId}`;
                if (props.name === "stepfox/casino-query-block") {
                    blockSelector = `#block_${props.attributes.customId}`;
                }
                if (props.attributes.custom_js) {
                    const jsCode = props.attributes.custom_js.replaceAll("this_block", blockSelector);
                    const scriptElement = document.createElement("script");
                    scriptElement.textContent = jsCode;
                    // Append the script after the custom CSS is injected.
                    document.body.appendChild(scriptElement);
                    // Remove the script after execution (after 1 second).
                    setTimeout(() => {
                        if (scriptElement.parentNode) {
                            scriptElement.parentNode.removeChild(scriptElement);
                        }
                    }, 1000);
                }
            };

            // Inject dynamic CSS in the editor.
            useEffect(() => {
                const cssCode = blockStyleBackend(props);
                const styleElement = document.createElement("style");
                styleElement.innerHTML = cssCode;
                document.head.appendChild(styleElement);
                return () => {
                    document.head.removeChild(styleElement);
                };
            }, [
                props.attributes.font_size_desktop,
                props.attributes.line_height_desktop,
                props.attributes.order_desktop,
                props.attributes.width_desktop,
                props.attributes.desktop_padding,
                props.attributes.desktop_margin,
                props.attributes.desktop_border,
                props.attributes.hide_desktop,
                props.attributes.hide_tablet,
                props.attributes.hide_mobile,
                props.attributes.font_size_tablet,
                props.attributes.line_height_tablet,
                props.attributes.order_tablet,
                props.attributes.width_tablet,
                props.attributes.tablet_padding,
                props.attributes.tablet_margin,
                props.attributes.tablet_border,
                props.attributes.font_size_mobile,
                props.attributes.line_height_mobile,
                props.attributes.order_mobile,
                props.attributes.width_mobile,
                props.attributes.mobile_padding,
                props.attributes.mobile_margin,
                props.attributes.mobile_border,
                props.attributes.custom_css,
                props.attributes.custom_js,
                props.attributes.customId,
                props.attributes.anchor,
                props.attributes.style,
            ]);

            return el(
                Fragment,
                {},
                el(BlockEdit, props),
                // Inject the dynamic CSS as hidden content.
                el("div", {
                    style: { display: "none" },
                    dangerouslySetInnerHTML: { __html: blockStyleBackend(props) },
                }),
                el(
                    wp.blockEditor.InspectorControls,
                    {},
                    el(
                        PanelBody,
                        { title: "Responsive", initialOpen: false },
                        // Desktop Panel
                        el(
                            PanelBody,
                            { title: "Desktop", initialOpen: false },
                            el("h2", { style: { fontSize: "20px" } }, "Desktop"),
                            el(
                                RadioGroup,
                                {
                                    label: "Visibility",
                                    onChange: (value) => props.setAttributes({ hide_desktop: value }),
                                    value: props.attributes.hide_desktop,
                                },
                                el(Radio, { value: "not-selected" }, "Not Selected"),
                                el(Radio, { value: "show" }, "Show"),
                                el(Radio, { value: "hide" }, "Hide")
                            ),
                            el("h4", { style: { fontSize: "17px" } }, "Font-Size"),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    label: "Font Size",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ font_size_desktop: value }),
                                    type: "number",
                                    value: props.attributes.font_size_desktop,
                                }),
                                el(UnitControl, {
                                    label: "Line Height",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ line_height_desktop: value }),
                                    type: "number",
                                    value: props.attributes.line_height_desktop,
                                })
                            ),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    label: "Width",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ width_desktop: value }),
                                    type: "number",
                                    value: props.attributes.width_desktop,
                                }),
                                el(NumberControl, {
                                    label: "Order",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ order_desktop: value }),
                                    type: "number",
                                    value: props.attributes.order_desktop,
                                })
                            ),
                            el(UnitControl, {
                                disabledUnits: false,
                                label: "Margin Top",
                                labelPosition: "top",
                                size: "small",
                                style: { width: "150px", margin: "0 auto" },
                                units: [
                                    { value: "px", label: "px", default: 0 },
                                    { value: "%", label: "%", default: 10 },
                                    { value: "em", label: "em", default: 0 },
                                ],
                                value: props.attributes.desktop_margin.top,
                                onChange: (nextVal) =>
                                    props.setAttributes({
                                        desktop_margin: { ...props.attributes.desktop_margin, top: nextVal },
                                    }),
                            }),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    disabledUnits: false,
                                    label: "Margin Left",
                                    labelPosition: "top",
                                    size: "small",
                                    style: { width: "150px", margin: "0 auto" },
                                    units: [
                                        { value: "px", label: "px", default: 0 },
                                        { value: "%", label: "%", default: 10 },
                                        { value: "em", label: "em", default: 0 },
                                    ],
                                    value: props.attributes.desktop_margin.left,
                                    onChange: (nextVal) =>
                                        props.setAttributes({
                                            desktop_margin: { ...props.attributes.desktop_margin, left: nextVal },
                                        }),
                                }),
                                el(UnitControl, {
                                    disabledUnits: false,
                                    label: "Margin Right",
                                    labelPosition: "top",
                                    size: "small",
                                    style: { width: "150px", margin: "0 auto" },
                                    units: [
                                        { value: "px", label: "px", default: 0 },
                                        { value: "%", label: "%", default: 10 },
                                        { value: "em", label: "em", default: 0 },
                                    ],
                                    value: props.attributes.desktop_margin.right,
                                    onChange: (nextVal) =>
                                        props.setAttributes({
                                            desktop_margin: { ...props.attributes.desktop_margin, right: nextVal },
                                        }),
                                })
                            ),
                            el(UnitControl, {
                                disabledUnits: false,
                                label: "Margin Bottom",
                                labelPosition: "top",
                                size: "small",
                                style: { width: "150px", margin: "0 auto" },
                                units: [
                                    { value: "px", label: "px", default: 0 },
                                    { value: "%", label: "%", default: 10 },
                                    { value: "em", label: "em", default: 0 },
                                ],
                                value: props.attributes.desktop_margin.bottom,
                                onChange: (nextVal) =>
                                    props.setAttributes({
                                        desktop_margin: { ...props.attributes.desktop_margin, bottom: nextVal },
                                    }),
                            }),
                            el(BoxControl, {
                                label: "Padding",
                                values: props.attributes.desktop_padding,
                                onChange: (nextVals) => props.setAttributes({ desktop_padding: nextVals }),
                            }),
                            el(BoxControl, {
                                label: "Border",
                                values: props.attributes.desktop_border,
                                onChange: (nextVals) => props.setAttributes({ desktop_border: nextVals }),
                            })
                        ),
                        // Tablet Panel
                        el(
                            PanelBody,
                            { title: "Tablet", initialOpen: false },
                            el("h2", { style: { fontSize: "20px" } }, "Tablet"),
                            el("div", { style: { display: "flex", flexDirection: "column", gap: "10px" } },
                                el(
                                    RadioGroup,
                                    {
                                        label: "Visibility",
                                        onChange: (value) => props.setAttributes({ hide_tablet: value }),
                                        value: props.attributes.hide_tablet,
                                    },
                                    el(Radio, { value: "not-selected" }, "Not Selected"),
                                    el(Radio, { value: "show" }, "Show"),
                                    el(Radio, { value: "hide" }, "Hide")
                                )
                            ),
                            el(
                                RadioGroup,
                                {
                                    label: "Justify",
                                    onChange: (value) => props.setAttributes({ justify_tablet: value }),
                                    value: props.attributes.justify_tablet,
                                },
                                el(Radio, { value: "flex-start" }, "flex-start"),
                                el(Radio, { value: "center" }, "center"),
                                el(Radio, { value: "flex-end" }, "flex-end"),
                                el(Radio, { value: "space-around" }, "space-around"),
                                el(Radio, { value: "space-between" }, "space-between"),
                                el(Radio, { value: "space-evenly" }, "space-evenly")
                            ),
                            el(
                                RadioGroup,
                                {
                                    label: "Align",
                                    onChange: (value) => props.setAttributes({ text_align_tablet: value }),
                                    value: props.attributes.text_align_tablet,
                                },
                                el(Radio, { value: "left" }, "left"),
                                el(Radio, { value: "center" }, "center"),
                                el(Radio, { value: "right" }, "right")
                            ),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    label: "Font Size",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ font_size_tablet: value }),
                                    type: "number",
                                    value: props.attributes.font_size_tablet,
                                }),
                                el(UnitControl, {
                                    label: "Line Height",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ line_height_tablet: value }),
                                    type: "number",
                                    value: props.attributes.line_height_tablet,
                                })
                            ),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    label: "Width",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ width_tablet: value }),
                                    type: "number",
                                    value: props.attributes.width_tablet,
                                }),
                                el(NumberControl, {
                                    label: "Order",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ order_tablet: value }),
                                    type: "number",
                                    value: props.attributes.order_tablet,
                                })
                            ),
                            el(UnitControl, {
                                disabledUnits: false,
                                label: "Margin Top",
                                labelPosition: "top",
                                size: "small",
                                style: { width: "150px", margin: "0 auto" },
                                units: [
                                    { value: "px", label: "px", default: 0 },
                                    { value: "%", label: "%", default: 10 },
                                    { value: "em", label: "em", default: 0 },
                                ],
                                value: props.attributes.tablet_margin.top,
                                onChange: (nextVal) =>
                                    props.setAttributes({
                                        tablet_margin: { ...props.attributes.tablet_margin, top: nextVal },
                                    }),
                            }),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    disabledUnits: false,
                                    label: "Margin Left",
                                    labelPosition: "top",
                                    size: "small",
                                    style: { width: "150px", margin: "0 auto" },
                                    units: [
                                        { value: "px", label: "px", default: 0 },
                                        { value: "%", label: "%", default: 10 },
                                        { value: "em", label: "em", default: 0 },
                                    ],
                                    value: props.attributes.tablet_margin.left,
                                    onChange: (nextVal) =>
                                        props.setAttributes({
                                            tablet_margin: { ...props.attributes.tablet_margin, left: nextVal },
                                        }),
                                }),
                                el(UnitControl, {
                                    disabledUnits: false,
                                    label: "Margin Right",
                                    labelPosition: "top",
                                    size: "small",
                                    style: { width: "150px", margin: "0 auto" },
                                    units: [
                                        { value: "px", label: "px", default: 0 },
                                        { value: "%", label: "%", default: 10 },
                                        { value: "em", label: "em", default: 0 },
                                    ],
                                    value: props.attributes.tablet_margin.right,
                                    onChange: (nextVal) =>
                                        props.setAttributes({
                                            tablet_margin: { ...props.attributes.tablet_margin, right: nextVal },
                                        }),
                                })
                            ),
                            el(UnitControl, {
                                disabledUnits: false,
                                label: "Margin Bottom",
                                labelPosition: "top",
                                size: "small",
                                style: { width: "150px", margin: "0 auto" },
                                units: [
                                    { value: "px", label: "px", default: 0 },
                                    { value: "%", label: "%", default: 10 },
                                    { value: "em", label: "em", default: 0 },
                                ],
                                value: props.attributes.tablet_margin.bottom,
                                onChange: (nextVal) =>
                                    props.setAttributes({
                                        tablet_margin: { ...props.attributes.tablet_margin, bottom: nextVal },
                                    }),
                            }),
                            el(BoxControl, {
                                label: "Padding",
                                values: props.attributes.tablet_padding,
                                onChange: (nextVals) => props.setAttributes({ tablet_padding: nextVals }),
                            }),
                            el(BoxControl, {
                                label: "Border",
                                values: props.attributes.tablet_border,
                                onChange: (nextVals) => props.setAttributes({ tablet_border: nextVals }),
                            })
                        ),
                        // Mobile Panel
                        el(
                            PanelBody,
                            { title: "Mobile", initialOpen: false },
                            el("h2", { style: { fontSize: "20px" } }, "Mobile"),
                            el("div", { style: { display: "flex", flexDirection: "column", gap: "10px" } },
                                el(
                                    RadioGroup,
                                    {
                                        label: "Visibility",
                                        onChange: (value) => props.setAttributes({ hide_mobile: value }),
                                        value: props.attributes.hide_mobile,
                                    },
                                    el(Radio, { value: "not-selected" }, "Not Selected"),
                                    el(Radio, { value: "show" }, "Show"),
                                    el(Radio, { value: "hide" }, "Hide")
                                )
                            ),
                            el(
                                RadioGroup,
                                {
                                    label: "Justify",
                                    onChange: (value) => props.setAttributes({ justify_mobile: value }),
                                    value: props.attributes.justify_mobile,
                                },
                                el(Radio, { value: "flex-start" }, "flex-start"),
                                el(Radio, { value: "center" }, "center"),
                                el(Radio, { value: "flex-end" }, "flex-end"),
                                el(Radio, { value: "space-around" }, "space-around"),
                                el(Radio, { value: "space-between" }, "space-between"),
                                el(Radio, { value: "space-evenly" }, "space-evenly")
                            ),
                            el(
                                RadioGroup,
                                {
                                    label: "Align",
                                    onChange: (value) => props.setAttributes({ text_align_mobile: value }),
                                    value: props.attributes.text_align_mobile,
                                },
                                el(Radio, { value: "left" }, "left"),
                                el(Radio, { value: "center" }, "center"),
                                el(Radio, { value: "right" }, "right")
                            ),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    label: "Font Size",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ font_size_mobile: value }),
                                    type: "number",
                                    value: props.attributes.font_size_mobile,
                                }),
                                el(UnitControl, {
                                    label: "Line Height",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ line_height_mobile: value }),
                                    type: "number",
                                    value: props.attributes.line_height_mobile,
                                })
                            ),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    label: "Width",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ width_mobile: value }),
                                    type: "number",
                                    value: props.attributes.width_mobile,
                                }),
                                el(NumberControl, {
                                    label: "Order",
                                    labelPosition: "top",
                                    onChange: (value) => props.setAttributes({ order_mobile: value }),
                                    type: "number",
                                    value: props.attributes.order_mobile,
                                })
                            ),
                            el(UnitControl, {
                                disabledUnits: false,
                                label: "Margin Top",
                                labelPosition: "top",
                                size: "small",
                                style: { width: "150px", margin: "0 auto" },
                                units: [
                                    { value: "px", label: "px", default: 0 },
                                    { value: "%", label: "%", default: 10 },
                                    { value: "em", label: "em", default: 0 },
                                ],
                                value: props.attributes.mobile_margin.top,
                                onChange: (nextVal) =>
                                    props.setAttributes({
                                        mobile_margin: { ...props.attributes.mobile_margin, top: nextVal },
                                    }),
                            }),
                            el(
                                "div",
                                { style: { display: "flex", gap: "10px" } },
                                el(UnitControl, {
                                    disabledUnits: false,
                                    label: "Margin Left",
                                    labelPosition: "top",
                                    size: "small",
                                    style: { width: "150px", margin: "0 auto" },
                                    units: [
                                        { value: "px", label: "px", default: 0 },
                                        { value: "%", label: "%", default: 10 },
                                        { value: "em", label: "em", default: 0 },
                                    ],
                                    value: props.attributes.mobile_margin.left,
                                    onChange: (nextVal) =>
                                        props.setAttributes({
                                            mobile_margin: { ...props.attributes.mobile_margin, left: nextVal },
                                        }),
                                }),
                                el(UnitControl, {
                                    disabledUnits: false,
                                    label: "Margin Right",
                                    labelPosition: "top",
                                    size: "small",
                                    style: { width: "150px", margin: "0 auto" },
                                    units: [
                                        { value: "px", label: "px", default: 0 },
                                        { value: "%", label: "%", default: 10 },
                                        { value: "em", label: "em", default: 0 },
                                    ],
                                    value: props.attributes.mobile_margin.right,
                                    onChange: (nextVal) =>
                                        props.setAttributes({
                                            mobile_margin: { ...props.attributes.mobile_margin, right: nextVal },
                                        }),
                                })
                            ),
                            el(UnitControl, {
                                disabledUnits: false,
                                label: "Margin Bottom",
                                labelPosition: "top",
                                size: "small",
                                style: { width: "150px", margin: "0 auto" },
                                units: [
                                    { value: "px", label: "px", default: 0 },
                                    { value: "%", label: "%", default: 10 },
                                    { value: "em", label: "em", default: 0 },
                                ],
                                value: props.attributes.mobile_margin.bottom,
                                onChange: (nextVal) =>
                                    props.setAttributes({
                                        mobile_margin: { ...props.attributes.mobile_margin, bottom: nextVal },
                                    }),
                            }),
                            el(BoxControl, {
                                label: "Padding",
                                values: props.attributes.mobile_padding,
                                onChange: (nextVals) => props.setAttributes({ mobile_padding: nextVals }),
                            }),
                            el(BoxControl, {
                                label: "Border",
                                values: props.attributes.mobile_border,
                                onChange: (nextVals) => props.setAttributes({ mobile_border: nextVals }),
                            })
                        ),
                        // Custom CSS Panel
                        el(
                            PanelBody,
                            { title: "Custom Css", initialOpen: false },
                            el(TextareaControl, {
                                label: "Custom Css",
                                help:
                                    "Here you can write custom CSS. For example: (this_block .high-title a { color: #F00; })",
                                onChange: (value) => props.setAttributes({ custom_css: value }),
                                value: props.attributes.custom_css,
                            })
                        ),
                        // Custom JS Panel with Run Button.
                        el(
                            PanelBody,
                            { title: "Custom JS", initialOpen: false },
                            el(
                                "div",
                                { style: { display: "flex", alignItems: "center", marginBottom: "5px" } },
                                el("span", { style: { fontWeight: "bold" } }, "Custom JS"),
                                el(
                                    Button,
                                    { isSecondary: true, onClick: runCustomJS, style: { marginLeft: "5px" } },
                                    "Run"
                                )
                            ),
                            el(TextareaControl, {
                                help:
                                    "Here you can write custom JavaScript. Use 'this_block' as a placeholder for the block selector.",
                                onChange: (value) => props.setAttributes({ custom_js: value }),
                                value: props.attributes.custom_js,
                            })
                        )
                    )
                )
            );
        };
    }, "withInspectorControls");

    wp.hooks.addFilter("editor.BlockEdit", "core/column", withInspectorControls);

    // Add custom attributes (using customId instead of id), including custom_js.
    const addAttributes = (settings) => {
        settings.attributes = {
            ...settings.attributes,
            // Desktop Attributes
            font_size_desktop: { type: "string", default: "" },
            line_height_desktop: { type: "string", default: "" },
            order_desktop: { type: "string", default: "" },
            width_desktop: { type: "string", default: "" },
            desktop_padding: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },
            desktop_margin: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },
            desktop_border: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },
            hide_desktop: { type: "string", default: "not-selected" },

            // Tablet Attributes
            hide_tablet: { type: "string", default: "not-selected" },
            text_align_tablet: { type: "string", default: "" },
            justify_tablet: { type: "string", default: "" },
            font_size_tablet: { type: "string", default: "" },
            line_height_tablet: { type: "string", default: "" },
            order_tablet: { type: "string", default: "" },
            width_tablet: { type: "string", default: "" },
            tablet_padding: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },
            tablet_margin: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },
            tablet_border: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },

            // Mobile Attributes
            hide_mobile: { type: "string", default: "not-selected" },
            text_align_mobile: { type: "string", default: "" },
            justify_mobile: { type: "string", default: "" },
            font_size_mobile: { type: "string", default: "" },
            line_height_mobile: { type: "string", default: "" },
            order_mobile: { type: "string", default: "" },
            width_mobile: { type: "string", default: "" },
            mobile_padding: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },
            mobile_margin: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },
            mobile_border: { type: "object", default: { top: "", left: "", right: "", bottom: "" } },

            // General Attributes (using customId)
            customId: { type: "string", default: "stepfox-not-set-id" },
            custom_css: { type: "string", default: "" },
            custom_js: { type: "string", default: "" },
        };

        return settings;
    };

    wp.hooks.addFilter("blocks.registerBlockType", "core/column", addAttributes);
})(window.wp.blocks, window.wp.blockEditor, window.wp.element, window.wp.components, window.jQuery);
