import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createRoot } from '@wordpress/element';
import { OrderMetaBox } from './components/OrderMetaBox/index.tsx';
import './index.css';

const query_client = new QueryClient();

const root_element = document.getElementById('jaak-metabox-root');

if (root_element) {
	const order_id_string = root_element.getAttribute('data-order-id');
	const order_key = root_element.getAttribute('data-order-key');

	if (typeof order_id_string !== 'string' || typeof order_key !== 'string') {
		// eslint-disable-next-line unicorn/prefer-type-error
		throw new Error('Order ID and Order Key are required to render the Jaak Meta Box.');
	}

	const order_id = Number.parseInt(order_id_string, 10);

	const root = createRoot(root_element);
	root.render(
		<QueryClientProvider client={query_client}>
			<OrderMetaBox order_id={order_id} order_key={order_key} />
		</QueryClientProvider>,
	);
}