
import 'elements-sk/error-toast-sk';
import { $$, findParent } from 'common-sk/modules/dom';
import { errorMessage } from 'elements-sk/errorMessage';
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';
import '../../infra-sk/modules/theme-chooser-sk';
import 'elements-sk/styles/buttons';

// Move to after theme-chooser-sk since that uses infra-sk styles right now.
import './index.scss';

// Handle the form action for toggling the 'hidden' state of any Artifact.
document.addEventListener('submit', (e) => {
  if (e.target.target !== '__toggle_hidden') {
    return;
  }
  e.preventDefault();
  fetch(e.target.action, {
    method: 'POST',
    body: new FormData(e.target),
  }).then(jsonOrThrow).then(() => {
    findParent(e.target, 'LI').classList.toggle('hidden');
  }).catch(errorMessage);
});

// When someone clicks the 'Edit' checkbox we display the edit buttons next to
// each Artifact that allows the hidden state to be toggled. The displaying is
// done via CSS, here we just toggle a CSS class on the 'main' element.
$$('#edit-toggle').addEventListener('change', (e) => {
  $$('main').classList.toggle('edit-mode', e.target.checked);
});