import { createMemoryRouter, RouterProvider } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

import { PepPageLayout, PepTopBar } from '@pepperi-addons/ngx-lib-react';

// 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';

function EditorListPage() {
    return <div style={{ padding: '1rem' }}>List</div>;
}

function EditorFormPage() {
    return <div style={{ padding: '1rem' }}>Form</div>;
}

const router = createMemoryRouter(
    [
        {
            path: '/:settingsSectionName/:addonUUID/:slugName/:formKey',
            element: <EditorFormPage />
        },
        {
            path: '/:settingsSectionName/:addonUUID/:slugName/*',
            element: <EditorListPage />
        },
        {
            path: '*',
            element: <EditorListPage />
        }
    ],
    {
        initialEntries: [window.location.pathname + window.location.search + window.location.hash]
    }
);

export default function SettingsApp() {
    const { t } = useTranslation();
    const topArea = <PepTopBar title={t('Settings_Title')} />;

    const mainArea = (
        <div style={{ height: '100%' }}>
            <RouterProvider router={router} />
        </div>
    );

    return <PepPageLayout addPadding={true} topArea={topArea} mainArea={mainArea} />;
}