import Configure from './configure.js';
import Element from './element.js';
import * as controller from './controller.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')],
};

//Note: demo-el is a custom element loaded in the markup.
  customElements.whenDefined("demo-el").then(() => {
    config.models.forEach((m) => {
      const de = document.createElement("demo-el");
      document.body.appendChild(de);
      de.def = { tagName: m.element, Element, Configure, controller };
      de.model = m;
    });
  });
