/**
 * Admin app entry: antd ConfigProvider themed to wp-admin.
 */
import { createRoot } from '@wordpress/element';
import { ConfigProvider, App as AntApp } from 'antd';
import { StyleProvider } from '@ant-design/cssinjs';

import AppShell from './App';
import '../../frontend/src/viewer.scss';
import './admin.scss';

const theme = {
	token: {
		colorPrimary: '#2271b1',
		colorSuccess: '#00a32a',
		colorWarning: '#dba617',
		colorError: '#d63638',
		colorText: '#1d2327',
		colorTextSecondary: '#646970',
		colorBorder: '#dcdcde',
		borderRadius: 8,
		fontSize: 13,
		fontFamily:
			'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
	},
	components: {
		Layout: {
			headerBg: '#fff',
			bodyBg: 'transparent',
		},
	},
};

const root = document.getElementById( 'vist360-admin' );

if ( root ) {
	createRoot( root ).render(
		<StyleProvider hashPriority="high">
			<ConfigProvider theme={ theme }>
				<AntApp>
					<AppShell />
				</AntApp>
			</ConfigProvider>
		</StyleProvider>
	);
}
