(() => {
    const {
        plugins,
        editPost,
        compose,
        data,
        i18n,
        components,
        blockEditor,
        hooks
    } = wp;
    const { createElement, Fragment, useState } = React;
    const { PanelBody, PanelRow, ToggleControl, Button, Panel } = components;
    const { PluginSidebar, PluginSidebarMoreMenuItem } = editPost;
    const { InspectorControls } = blockEditor;
    const { withSelect, withDispatch } = data;
    const { __ } = i18n;

    const pluginIcon = createElement("svg", {
        className: "ariafse-page-settings-button",
        xmlns: "http://www.w3.org/2000/svg",
        width: "24",
        height: "24",
        viewBox: "0 0 24 24",
        fill: "none"
    }, createElement("path", {
        fillRule: "evenodd",
        clipRule: "evenodd",
        d:
            "M16.2,0.4H5.8c-2.9,0-5.3,2.4-5.3,5.4v10.5c0,3,2.4,5.4,5.3,5.4h10.5c3,0,5.3-2.4,5.3-5.4V5.8 C21.6,2.8,19.2,0.4,16.2,0.4z M11,17.2c-3.4,0-6.2-2.8-6.2-6.2c0-1.1,0.3-2.2,0.9-3.2l1.7,1.7C7.3,10,7.2,10.5,7.2,11 c0,2.1,1.7,3.8,3.8,3.8c0.5,0,1-0.1,1.4-0.3l1.7,1.7C13.2,16.9,12.1,17.2,11,17.2z M9.2,11c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8 S12,12.8,11,12.8C10,12.8,9.2,12,9.2,11z M17.2,16.8l-3.3-3.3c0.6-0.7,1-1.6,1-2.5c0-2.1-1.7-3.8-3.8-3.8c-0.9,0-1.8,0.3-2.5,1 L6.8,6.5C8,5.4,9.4,4.8,11,4.8c3.4,0,6.2,2.8,6.2,6.2V16.8z",
    }));

    const HeaderToggleControls = (props) => {
        const isSticky = !!props?.meta?._ariafse_meta_sticky_header;
        const isTransparent = !!props?.meta?._ariafse_meta_transparent_header;

        return createElement(Fragment, null,
            !isTransparent && createElement(PanelRow, null,
            createElement(ToggleControl, {
                label: __("Enable Sticky Header", "aria-fse"),
                checked: isSticky,
                onChange: (value) => props.setMetaFieldValue(value, "_ariafse_meta_sticky_header")
            })
            ),
            !isSticky && createElement(PanelRow, null,
            createElement(ToggleControl, {
                label: __("Enable Transparent Header", "aria-fse"),
                checked: isTransparent,
                onChange: (value) => props.setMetaFieldValue(value, "_ariafse_meta_transparent_header")
            })
            )
        );
    };

    const DisableSectionPanel = (props) => {
        const sections = Object.entries(ariaFse.disable_sections).map(([key, config]) => {
            const checked = !!props?.meta[config.key];
            return createElement(PanelRow, { key },
                createElement(ToggleControl, {
                    label: config.label,
                    checked,
                    onChange: (value) => props.setMetaFieldValue(value, config.key)
                })
            );
        });

        return createElement(Fragment, null,
            createElement(PanelBody, {
                title: __("Disable Elements", "aria-fse"),
                initialOpen: true
            }, sections),
            !props?.meta?._ariafse_meta_header_display &&
            createElement(PanelBody, {
                title: __("Header Settings", "aria-fse"),
                initialOpen: true
            }, createElement(HeaderToggleControls, props))
        );
    };

    const SidebarComponent = compose.compose(
        withSelect((select) => {
            const meta = select("core/editor").getEditedPostAttribute("meta");
            return { meta };
        }),
        withDispatch((dispatch) => {
            return {
                setMetaFieldValue: (value, key) => {
                    dispatch("core/editor").editPost({
                        meta: { [key]: value }
                    });
                }
            };
        })
    )((props) => {
        return createElement(Fragment, null,
            createElement(PluginSidebarMoreMenuItem, {
                target: "ariafse-page-settings-panel",
                icon: pluginIcon
            }, __("Aria Page Settings", "aria-fse")),
            createElement(PluginSidebar, {
                name: "ariafse-page-settings-panel",
                title: __("Aria Page Settings", "aria-fse"),
                icon: pluginIcon
            }, createElement(DisableSectionPanel, props))
        );
    });

        plugins.registerPlugin("ariafse-page-settings", {
            render: SidebarComponent
        });

})();