main.ts

import { Badge } from "./models/Badge.js";

const formElem = getElem<HTMLFormElement>('badge-form');
const badgesElem = getElem<HTMLElement>('badges');
const resetBtn = getElem<HTMLButtonElement>('reset-btn');
const badges: Badge[] = Badge.LoadBadges();
renderBadges();

function getElem<T extends HTMLElement>(id: string): T | null {
  return document.getElementById(id) as T;
}

formElem?.addEventListener('submit', handleSubmit);
resetBtn?.addEventListener('click', clearBadges);

function handleSubmit(event: Event) {
  event.preventDefault();
  if (!formElem) return;

  const formData = new FormData(formElem);
  const name = formData.get('name') as string;
  const title = formData.get('title') as string;
  const department = formData.get('department') as string;
  const imgUrl = formData.get('imgUrl') as string;

  const badge = new Badge(name, title, department, imgUrl);
  badges.push(badge);
  renderBadges();
  formElem.reset();
  Badge.SaveBadges(badges);
}

function renderBadges() {
  if (!badgesElem) return;
  badgesElem.innerHTML = '';
  let template = '';
  badges.forEach((badge) => {
    template += badge.getTemplate();
  });
  badgesElem.innerHTML = template;
}

function clearBadges() {
  badges.length = 0;
  renderBadges();
}