import PrintElement from './print.js';

var generate = {};

const choice = (l, v) => ({ label: l, value: v });

const markup = '<p>The {{0}} <br> jumped {{1}} <br> the {{2}}</p>';

generate.model = (id, element) => ({
  id,
  element,
  markup,
  disabled: false,
  choices: {
    0: [choice('cow', '0'), choice('cattle', '1'), choice('calf', '2')],
    1: [choice('over', '0'), choice('past', '1'), choice('beyond', '2')],
    2: [choice('moon', '0')],
  },
  maxLengthPerChoice: [7, 10, 4],
  prompt: 'Complete the sentence',
  promptEnabled: true,
  toolbarEditorPosition: 'bottom',
  rubricEnabled: false,
});

const { model } = generate;

var config = {
  elements: {
    'explicit-constructed-response': '../..',
  },
  models: [model('1', 'explicit-constructed-response')],
};

// new init - just shows off print!

const init = async () => {
  console.log('define the element...');
  await Promise.all(
    config.models.map(async (m) => {
      try {
        const printTag = `${m.element}-print`;
        if (customElements.get(printTag)) {
          return true;
        } else {
          customElements.define(printTag, PrintElement);
          await customElements.whenDefined(printTag);
          return true;
        }
      } catch (e) {
        return false;
      }
    })
  );

  console.log('now apply the model...');
  config.models.forEach((m) => {
    const printTag = `${m.element}-print`;
    const h3s = document.createElement('h3');
    h3s.textContent = 'student mode';
    document.body.appendChild(h3s);
    const de = document.createElement(printTag);
    document.body.appendChild(de);
    de.options = {};
    de.model = m;

    const h3 = document.createElement('h3');
    h3.textContent = 'instructor mode';
    document.body.appendChild(h3);
    const instr = document.createElement(printTag);
    document.body.appendChild(instr);
    instr.options = { mode: 'instructor' };
    instr.model = JSON.parse(JSON.stringify(m));
  });
};

init()
  .then(() => {
    console.log('ready');
  })
  .catch((e) => {
    console.error(e);
  });
