import {
  stateInstrument,
  stateMechanism,
  createInstrumentForm,
  createMechanismForm,
} from './addObjectForm'
import Editor from './editor'
import 'diagram-js/assets/diagram-js.css'

const instrMechContainer = document.getElementById('instrument-form')
const instrument = createInstrumentForm()
const mechanism = createMechanismForm()

instrument.onchange = function () {
  console.log(stateInstrument)
}
mechanism.onchange = function () {
  console.log(stateMechanism)
}

instrMechContainer?.appendChild(instrument)
instrMechContainer?.appendChild(mechanism)
const diagramElement = document.getElementById('diagram')
if (!diagramElement) {
  throw new Error('Element with ID "diagram" not found in DOM.')
}
diagramElement.style.width = '297mm'
diagramElement.style.height = '210mm'
diagramElement.style.border = 'solid'
diagramElement.style.borderColor = 'canvastext'
diagramElement.style.borderWidth = '1px'
const diagram = Editor(diagramElement)
export default diagram