import React from 'react';
import ReactDOM from 'react-dom/client';

import { config } from './addon.config';
import './i18n';

// **IMPORTENT**
// Those files are loaded on page builder - no needed here (under pages container), 
// use them only for none page block usage look in SettingsApp.tsx for more details
// Load Angular Elements bundles for Pepperi components
// import '@pepperi-addons/ngx-lib-react/elements/runtime.js';
// import '@pepperi-addons/ngx-lib-react/elements/polyfills.js';
// import '@pepperi-addons/ngx-lib-react/elements/main.js';

// import '@pepperi-addons/ngx-composite-lib-react/elements/runtime.js';
// import '@pepperi-addons/ngx-composite-lib-react/elements/polyfills.js';
// import '@pepperi-addons/ngx-composite-lib-react/elements/main.js';

// Import Pepperi styles
// import '@pepperi-addons/ngx-lib-react/elements/styles.css';
// import '@pepperi-addons/ngx-composite-lib-react/elements/styles.css';
// **IMPORTENT END**

import SettingsApp from './app/settings/SettingsApp';
// NOTE: To support Page Blocks, uncomment the Block + Block Editor imports, the page-block support section, and the registrations below.
// import Block from './app/block/Block';
// import BlockEditor from './app/block-editor/BlockEditor';

// Page block support (uncomment to enable)
// type HostProps = { hostObject?: unknown; hostEmit?: (evt: unknown) => void };

// function defineElement(tag: string, Component: React.ComponentType<HostProps>) {
//     if (customElements.get(tag)) {
//         return;
//     }

//     class ReactElement extends HTMLElement {
//         private root?: ReactDOM.Root;
//         private container?: HTMLDivElement;
//         private _hostObject?: unknown;

//         connectedCallback() {
//             if (!this.container) {
//                 this.container = document.createElement('div');
//                 this.container.classList.add('pepperi-theme');
//                 this.container.style.height = '100%';
//                 this.appendChild(this.container);
//                 this.root = ReactDOM.createRoot(this.container);
//             }

//             this.render();
//         }

//         disconnectedCallback() {
//             this.root?.unmount();
//             this.root = undefined;

//             if (this.container) {
//                 this.removeChild(this.container);
//                 this.container = undefined;
//             }
//         }

//         get hostObject() {
//             return this._hostObject;
//         }

//         set hostObject(value: unknown) {
//             this._hostObject = value;
//             this.render();
//         }

//         private render() {
//             const hostEmit = (evt: unknown) => {
//                 this.dispatchEvent(new CustomEvent('hostEvents', { detail: evt, bubbles: true }));
//             };

//             this.root?.render(React.createElement(Component, { hostObject: this._hostObject, hostEmit }));
//         }
//     }

//     customElements.define(tag, ReactElement);
// }

class SettingsElement extends HTMLElement {
    private root: ReactDOM.Root | null = null;

    connectedCallback() {
        const addonData = (this as any).addonData as unknown;

        const container = document.createElement('div');
        container.className = 'pepperi-theme';
        container.style.height = '100%';
        this.appendChild(container);

        this.root = ReactDOM.createRoot(container);
        this.root.render(
            <React.StrictMode>
                <SettingsApp />
            </React.StrictMode>
        );

        void addonData;
    }

    disconnectedCallback() {
        this.root?.unmount();
        this.root = null;
    }
}

const settingsElementName = `settings-element-${config.AddonUUID}`;
if (!customElements.get(settingsElementName)) {
    customElements.define(settingsElementName, SettingsElement);
}

// NOTE: To support Page Blocks, uncomment the registrations below.
// defineElement(`block-element-${config.AddonUUID}`, Block);
// defineElement(`block-editor-element-${config.AddonUUID}`, BlockEditor);

const WebComponents = {};

export default WebComponents;
export { WebComponents };