import { createOrgChart, JsonOrgChartDataSource } from './assets/index.js';
const chart = document.getElementById('chart');
const selector = document.getElementById('dataset');
const fieldset = document.getElementById('companies');
const error = document.getElementById('error');
const fixtures = Object.fromEntries(await Promise.all(['small', 'medium', 'large'].map(async size => [size, await (await fetch(`./data-expanded-${size}.json`)).json()])));
const connections = Object.fromEntries(fixtures.large.organizations.map((org, index) => [org.id, ['top', 'left', 'right'][index % 3]]));
const handle = createOrgChart({ container: chart, layoutMode: 'auto', displayMode: 'readOnly', dataSource: new JsonOrgChartDataSource(fixtures.small),
  stylesheetUrls: { engine: './assets/engine.css', core: './assets/style.css' }, employeeConnections: connections,
  companyTopNodes: { ptc: { title: '기술총괄', name: '가상책임자 5' } },
  onStateChange: state => { error.textContent = state.status === 'error' ? '조직도 데이터 또는 스타일을 확인해 주세요.' : ''; } });
// Dev/example ownership only. Filtering is done by the public Core handle.
window.expandedHandle = handle;
async function selection() {
  await handle.setSelectedCompanies([...fieldset.querySelectorAll('input:checked')].map(input => input.value));
}
function companies() {
  fieldset.querySelectorAll('label').forEach(label => label.remove());
  for (const company of fixtures[selector.value].affiliations) {
    const label = document.createElement('label'), input = document.createElement('input');
    input.type = 'checkbox'; input.checked = true; input.value = company.id;
    input.id = `company-${company.id}`; label.htmlFor = input.id;
    label.append(input, document.createTextNode(company.name));
    input.addEventListener('change', () => { void selection(); }); fieldset.append(label);
  }
}
selector.addEventListener('change', async () => {
  companies(); await handle.setSelectedCompanies(); await handle.reload(new JsonOrgChartDataSource(fixtures[selector.value]));
});
document.getElementById('all').addEventListener('click', async () => { fieldset.querySelectorAll('input').forEach(input => { input.checked = true; }); await handle.setSelectedCompanies(); });
document.getElementById('none').addEventListener('click', async () => { fieldset.querySelectorAll('input').forEach(input => { input.checked = false; }); await selection(); });
companies(); await handle.mount();
window.addEventListener('pagehide', () => handle.destroy(), { once: true });