import { el } from '../lib/dom.js';
import { TypeChip } from './TypeChip.js';
import { defensiveMatchups } from '../data/type-chart.js';

const GROUPS = [
  { key: '4', label: '4× damage', cls: 'x4' },
  { key: '2', label: '2× damage', cls: 'x2' },
  { key: '0.5', label: '½× damage', cls: 'half' },
  { key: '0.25', label: '¼× damage', cls: 'quarter' },
  { key: '0', label: 'No effect', cls: 'zero' },
];

/** Defensive type effectiveness for the given Pokémon types. */
export function TypeMatchups(types, gen = 9) {
  const buckets = defensiveMatchups(types, gen);
  const wrap = el('div', { class: 'matchups' });

  for (const g of GROUPS) {
    const list = buckets[g.key];
    if (!list.length) continue;
    wrap.append(
      el(
        'div',
        { class: `matchups__row matchups__row--${g.cls}` },
        el('span', { class: 'matchups__label' }, g.label),
        el('span', { class: 'matchups__types' }, ...list.map(TypeChip)),
      ),
    );
  }

  if (!wrap.children.length) {
    return el('p', { class: 'detail__muted' }, 'Takes normal damage from every type.');
  }
  return wrap;
}