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

const { data, layout, embed } = readQuery();
if (embed) document.body.classList.add('embed');
const stylesheetUrls = { engine: engineUrl, core: coreUrl };
let replace: (key: string) => void = () => {};
let rerender: () => void = () => {};

function ChartOnlyPage() {
  const [key, setKey] = useState(data);
  const [, setTick] = useState(0);
  replace = setKey;
  rerender = () => setTick(value => value + 1);
  const dataSource = useMemo(() => new JsonOrgChartDataSource(datasets[key]!()), [key]);
  // Inline option literals are intentional: equal values must not refit on re-render.
  return <OrgChart dataSource={dataSource} stylesheetUrls={stylesheetUrls} displayMode="readOnly" layoutMode="auto"
    autoLayout={{ type: layout }} presentationMode="chart-only"
    zoom={new URLSearchParams(location.search).has('verify-min') ? { min: 0.8 } : undefined}
    style={{ height: '100%' }} />;
}

createRoot(document.getElementById('chart')!).render(<StrictMode><ChartOnlyPage /></StrictMode>);
// Verification seam only.
Object.assign(window, { replaceData: (key: string) => replace(key), rerenderPage: () => rerender() });