import { AUTOMATONS } from './examples.js';
import { selectAutomaton } from './fsm.js';

const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector'));
const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection'));
const app = /** @type {HTMLDivElement} */ (document.getElementById('app'));

for (const [displayName, automaton] of Object.entries(AUTOMATONS)) {
  const card = document.createElement('div');
  card.setAttribute('tabindex', '0');
  card.setAttribute('role', 'button');
  card.classList.add('card');
  card.innerHTML = `
        <div class="card-body">
        <h5 class="card-title">${displayName}</h5>
        <p class="card-text">${automaton.length} states</p>
        </div>
    `;
  const handleEvent = async () => {
    automatonSelector.setAttribute('hidden', 'hidden');
    app.removeAttribute('hidden');
    await selectAutomaton(automaton);
  };
  card.addEventListener('click', handleEvent);
  card.addEventListener('keydown', async (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      await handleEvent();
    }
  });
  automatonCollection.appendChild(card);
}