import { AUTOMATONS } from './examples.js';
import { openAutomaton } from './fsm.js';
import './modal.ts';

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 = () => {
    automatonSelector.setAttribute('hidden', 'hidden');
    app.removeAttribute('hidden');
    openAutomaton(automaton);
  };
  card.addEventListener('click', handleEvent);
  card.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      handleEvent();
    }
  });
  automatonCollection.appendChild(card);
}
const create = document.createElement('div');
create.classList.add('card');
create.innerHTML = `
    <div class="card-body">
    <h5 class="card-title">Create New Automaton</h5>
    <p class="card-text">Create a new automaton from scratch.</p>
    </div>
`;
automatonCollection.appendChild(create);
create.addEventListener('click', () => {
  automatonSelector.setAttribute('hidden', 'hidden');
  app.removeAttribute('hidden');
  openAutomaton([], true);
});