import { el } from '../lib/dom.js';
import { Sprite } from './Sprite.js';
import { settings } from '../store/settings.js';

const bar = (w, h = 14) =>
  el('span', { class: 'sk-bar', style: `width:${w};height:${h}px` });

const facts = () =>
  el(
    'div',
    { class: 'pfacts' },
    ...Array.from({ length: 6 }, () =>
      el('div', { class: 'fact' }, bar('42px', 9), bar('72px', 15)),
    ),
  );

/** Placeholder shown while a Pokémon detail page loads. */
export function detailSkeleton(match) {
  const id = match && Number(match[1]);
  // Real sprite in the hero spot (cheap, usually cached) so the tapped
  // card's art can morph straight into it.
  const art = id
    ? el(
        'div',
        { class: 'sk-art sk-art--live', style: 'view-transition-name: pkmn-sprite' },
        Sprite(id, {
          style: settings.get().spriteStyle === 'default' ? 'official' : settings.get().spriteStyle,
          alt: '',
          size: 220,
        }),
      )
    : el('div', { class: 'sk-art' });
  return el(
    'section',
    { class: 'view pdetail sk' },
    el(
      'div',
      { class: 'phero sk-hero' },
      el('div', { class: 'phero__top' }, bar('72px', 34), bar('130px', 14), bar('34px', 34)),
      el('div', { class: 'phero__head' }, bar('55%', 30)),
      art,
    ),
    el(
      'div',
      { class: 'psheet' },
      el(
        'div',
        { class: 'psheet__tabs' },
        ...Array.from({ length: 5 }, () => bar('58px', 18)),
      ),
      el('div', { class: 'ppanel' }, bar('92%'), bar('84%'), bar('66%'), facts()),
    ),
  );
}

/** Placeholder for move / item detail pages. */
export function lookupSkeleton() {
  return el(
    'section',
    { class: 'view lookup sk' },
    bar('84px', 16),
    el('div', { class: 'sk-hero sk-hero--sm' }),
    facts(),
    el('div', { class: 'detail__section' }, bar('90px', 16), bar('96%'), bar('70%')),
  );
}