import { StrictMode, useMemo } from 'react';
import { createRoot } from 'react-dom/client';
import { OrgChart } from '@hm-design/org-chart-react/hm-dialog';
import { JsonOrgChartDataSource } 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 { datasets, readQuery } from './data';
import './hm-theme.css';
import './chart-only.css';

const { data, layout } = readQuery();
const stylesheetUrls = { engine: engineUrl, core: coreUrl };

function ChartOnlyPage() {
  const dataSource = useMemo(() => new JsonOrgChartDataSource(datasets[data]!()), []);
  return <OrgChart dataSource={dataSource} stylesheetUrls={stylesheetUrls} displayMode="readOnly" layoutMode="auto"
    autoLayout={{ type: layout }} presentationMode="chart-only" employeePopup="hm-dialog" style={{ height: '100%' }} />;
}

createRoot(document.getElementById('chart')!).render(<StrictMode><ChartOnlyPage /></StrictMode>);