(() => {
    "use strict";

    const {
        createElement,
        Fragment,
        useState,
        useEffect,
        useCallback,
    } = window.React;

    const {
        registerPlugin,
    } = window.wp.plugins;

    const {
        PluginSidebar,
    } = window.wp.editSite;

    const {
        __,
    } = window.wp.i18n;

    const {
        PanelBody,
        PanelRow,
        ToggleControl,
    } = window.wp.components;

    const {
        dispatch,
    } = window.wp.data;

    const apiFetch = window.wp.apiFetch;
    const {
        addFilter,
    } = window.wp.hooks;

    const IconLogo = 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.8C21.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,11c0,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.8S12,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,1L6.8,6.5C8,5.4,9.4,4.8,11,4.8c3.4,0,6.2,2.8,6.2,6.2V16.8z",
        })
    );

    const ToggleSetting = ({ setting, setSetting, id, setData, notice, label }) => {
        const handleChange = useCallback(() => {
            const newValue = { ...setting, [id]: !setting[id] };
            setSetting(newValue);
            setData(newValue);
            dispatch("core/notices").createNotice("success", notice, {
                type: "snackbar",
                isDismissible: true,
            });
        }, [setting]);

        return createElement(Fragment, null,
            createElement(PanelRow, null,
                createElement(ToggleControl, {
                    label: label,
                    checked: setting[id],
                    onChange: handleChange
                })
            )
        );
    };

    const SettingsPanel = () => {
        const [settings, setSettings] = useState({ scroll_top: false });
        const endpoint = "ariafse/v1/global_settings";

        useEffect(() => {
            (async () => {
                try {
                    const data = await apiFetch({
                        path: endpoint,
                        method: "GET",
                        headers: {
                            "Content-Type": "application/json",
                            "X-WP-NONCE": ariaFse.nonce,
                        },
                    });
                    if (data) setSettings(data);
                } catch (err) {
                    console.error(err);
                }
            })();
        }, []);

        const updateSetting = async (data) => {
            try {
                await apiFetch({
                    path: endpoint,
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-WP-NONCE": ariaFse.nonce,
                    },
                    body: JSON.stringify({ setting: data }),
                });
            } catch (err) {
                console.error(err);
            }
        };

        return createElement(Fragment, null,
            createElement(PanelBody, {
                    title: __("Aria Settings", "aria-fse"),
                    initialOpen: true,
                    className: "ariafse-global-features-panel"
                },
                createElement(ToggleSetting, {
                    setting: settings,
                    setSetting: setSettings,
                    id: "scroll_top",
                    setData: updateSetting,
                    notice: __("Scroll to top updated", "aria-fse"),
                    label: __("Scroll To Top", "aria-fse"),
                })
            )
        );
    };

    registerPlugin('ariafse-editor-sidebar', {
        render: () => (
            <Fragment>
                <PluginSidebar
                    name="ariafse-editor-sidebar"
                    icon={IconLogo}
                    isPinnable={true}
                    title={__('Aria Editor Settings', 'aria-fse')}
                >
                    {!ariaFse.is_ablocks_plugin && <SettingsPanel />}
                </PluginSidebar>
            </Fragment>
        ),
    });


    addFilter("ablocks.page-sidebar.before", "ariafse/editor-settings-list", (originalContent, props) => {
            return createElement(Fragment, null, originalContent, createElement(SettingsPanel, { ...props }));
        }, 10);


})();