const addHS = new OO.ui.ButtonWidget({
	icon: 'mapPinAdd',
	label: 'Add annotation',
	invisibleLabel: true,
    class: 'edit-button'
})
addHS.on('click', readyAddHotspot)
addHS.setDisabled(true)
console.log(addHS)

const updateHS = new OO.ui.ButtonWidget({
	icon: 'reload',
	label: 'Update annotations',
	invisibleLabel: true
})
updateHS.on('click', readMetadata)
updateHS.setDisabled(true)

const deleteHS = new OO.ui.ButtonWidget({
	icon: 'cancel',
	label: 'Delete annotation',
	invisibleLabel: true
})
deleteHS.on('click', readyDelHotspot)
deleteHS.setDisabled(true)

const hotspotButtons = new OO.ui.ButtonGroupWidget( {
    items: [ addHS, updateHS, deleteHS ]
} );
console.log(hotspotButtons)

const downloadViewerImage = new OO.ui.ButtonWidget({
	icon: 'imageAdd',
	label: 'Download current image',
	invisibleLabel: true
})
downloadViewerImage.on('click', () => {
    downloadImage("TempTitle.glb")
})
downloadViewerImage.setDisabled(true)

const setView = new OO.ui.ButtonWidget({
	icon: 'camera',
	label: 'Set Initial View',
	invisibleLabel: true
})
setView.on('click', writeCameraOrbit)
setView.setDisabled(true)

const cameraButtons = new OO.ui.ButtonGroupWidget( {
    items: [ downloadViewerImage, setView ]
} );

const modelMenu = new OO.ui.HorizontalLayout( {
    items: [
      hotspotButtons,
      cameraButtons
    ],
    id: 'edit-model-menu'
});

$('#wikiPreview').after(modelMenu.$element);

enableMenu = function() {
    modelMenu.items.forEach(group => {
        group.items.forEach(el => el.setDisabled(false))
    });
}