import { el } from '../lib/dom.js';
import { gameSpriteUrl } from '../data/game-sprites.js';

const SPRITES =
  'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon';

function pixel(id, shiny) {
  return `${SPRITES}${shiny ? '/shiny' : ''}/${id}.png`;
}

/**
 * Resolve a sprite URL for a style. `game` uses era-accurate pixel art for
 * the selected version group, falling back to HOME art for games that never
 * had pixel sprites.
 */
export function spriteUrl(id, style = 'default', shiny = false, versionGroup) {
  if (style === 'official') {
    return `${SPRITES}/other/official-artwork${shiny ? '/shiny' : ''}/${id}.png`;
  }
  if (style === 'home') {
    return `${SPRITES}/other/home${shiny ? '/shiny' : ''}/${id}.png`;
  }
  if (style === 'game') {
    return (
      gameSpriteUrl(id, versionGroup, { shiny }) ||
      `${SPRITES}/other/home${shiny ? '/shiny' : ''}/${id}.png`
    );
  }
  return pixel(id, shiny);
}

export function Sprite(
  id,
  { style = 'default', shiny = false, versionGroup, alt = '', size = 96 } = {},
) {
  const img = el('img', {
    class: 'sprite',
    loading: 'lazy',
    decoding: 'async',
    width: size,
    height: size,
    alt,
    src: spriteUrl(id, style, shiny, versionGroup),
  });
  // Not every form/style has art — degrade to the plain pixel sprite once.
  img.addEventListener(
    'error',
    () => {
      img.src = pixel(id, false);
    },
    { once: true },
  );
  return img;
}