import { createRoot } from '@wordpress/element';
import {
	Popover,
	SlotFillProvider,
} from '@wordpress/components';
import AdminMediaProvider from './AdminMediaProvider';
import App from './App';
import BlockEditor from './pages/BlockEditor';
import PreviewModal from './components/PreviewModal';
import LibraryCardThumb from './components/LibraryCardThumb';
import { initBmTabsNav } from '../shared/bmTabsNav';
import './styles/tokens.css';
import './styles/components/button.css';
import './styles/components/card.css';
import './styles/components/notice.css';
import './styles/components/toast.css';
import './styles/components/table.css';
import './styles/components/badge.css';
import './styles/components/field.css';
import './styles/components/empty.css';
import './styles/components/confirm-modal.css';
import './styles/components/welcome.css';
import './styles/components/library-card.css';
import './styles/components/library-skeleton.css';
import './styles/components/owner-unlock.css';
import './styles/components/brand-loader.css';
import './styles/components/dashboard-journey.css';
import './styles/components/path-cards.css';
import './styles/components/cat-cards.css';
import './styles/components/seg-tabs.css';
import './styles/tailwind.css';
import './styles/admin.scss';

import LibrarySkeleton from './components/LibrarySkeleton';
import BlocksListFilters, {
	blockMatchesCategory,
	categoryOptionsFromItems,
} from './components/BlocksListFilters';

// Pro Owner Library reuses free preview + editor components via this bridge.
window.jocbmComponents = {
	...( window.jocbmComponents || {} ),
	BlockEditor,
	PreviewModal,
	LibraryCardThumb,
	LibrarySkeleton,
	BlocksListFilters,
	blockMatchesCategory,
	categoryOptionsFromItems,
};

const el = document.getElementById( 'joc-blockora-morph-app' );
initBmTabsNav( document );
if ( el ) {
	createRoot( el ).render(
		<SlotFillProvider>
			<AdminMediaProvider>
				<App />
			</AdminMediaProvider>
			{ Popover.Slot ? <Popover.Slot /> : null }
		</SlotFillProvider>
	);
}
