import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { OrgChart, type OrgChartProps } from '@hm-design/org-chart-react';
import { JsonOrgChartDataSource, type OrgChartState } from '@hm-design/org-chart';
import engineUrl from '@hm-design/org-chart/engine.css?url';
import coreUrl from '@hm-design/org-chart/style.css?url';
import fixture from '../org-chart/data-p1.json';
import './p1.css';

const root = createRoot(document.getElementById('root')!);
const events: OrgChartState[] = [];
const errors: string[] = [];
const displayMode = new URLSearchParams(location.search).get('mode') === 'readOnly' ? 'readOnly' : 'interactive';
document.documentElement.dataset.orgchartMode = displayMode;
type QueryOptions = Pick<OrgChartProps, 'organizationLinks' | 'onEmployeeClick'>;
let queryOptions: QueryOptions = {};
let currentData: unknown = fixture;
function setData(data: unknown) {
  currentData = data;
  root.render(<StrictMode><OrgChart
    dataSource={new JsonOrgChartDataSource(data)} stylesheetUrls={{ engine: engineUrl, core: coreUrl }} className="consumer-chart"
    displayMode={displayMode}
    {...queryOptions}
    onStateChange={state => events.push(state)} onLifecycleError={error => errors.push(String(error))}
  /></StrictMode>);
}
// Optional public-prop seam for consumer integration checks; no URLs are preset.
function setOptions(options: QueryOptions) { queryOptions = options; setData(currentData); }
const demo = { data: fixture, events, errors, setData, setOptions, destroy: () => root.unmount() };
declare global { interface Window { OrgChartP1React: typeof demo } }
window.OrgChartP1React = demo;
setData(fixture);