import React, { lazy } from 'react';
import { ProdOnly } from '@wener/reaction';
import { useShallow } from 'zustand/react/shallow';
import { useUserId } from '../../console/context';
import { useSiteStore } from './SiteStore';

// avoid browser block the js cause app failed to load
const MatomoTracker = lazy(() => import('../../matomo/MatomoTracker').then((m) => ({ default: m.MatomoTracker })));

export const SiteSidecar = () => {
	const { url, siteId } = useSiteStore(
		useShallow((s) => {
			return {
				url: s.metadata?.matomoUrl,
				siteId: s.metadata?.matomoSiteId,
			};
		}),
	);

	return (
		<>
			<ProdOnly>{siteId && url && <MatomoTracker url={url} siteId={siteId} useUserId={useUserId} />}</ProdOnly>
		</>
	);
};