import { $el } from '@hamcha/domutil';
import { convert_to_hiragana } from '@hamcha/weeblib';

import { loadCardData } from './read-data';

import './index.css';

const scryfallURL = (scryfallId: string) =>
  `https://cards.scryfall.io/large/front/${scryfallId?.charAt(0)}/${scryfallId?.charAt(1)}/${scryfallId}.jpg`;

const parseMC = (mc: string) =>
  mc
    .slice(1, -1)
    .split('}{')
    .map((v) => $el('span.manapip', v));

let main = $el(
  'main',
  $el('h1', convert_to_hiragana('Caricamento in corso...')),
);
document.body.appendChild(main);

const cards = await loadCardData();

const render = () => {
  const randomCard = cards[Math.floor(Math.random() * cards.length)];
  const cardImage = $el('img.bg', { src: scryfallURL(randomCard.id) });

  main.remove();
  main = $el(
    'main',
    cardImage,
    $el(
      'h1',
      convert_to_hiragana(randomCard.name),
      randomCard.manaCost
        ? $el('span.manacost', ...parseMC(randomCard.manaCost))
        : '',
    ),
    $el(
      'article.cardbox',
      $el('h2', convert_to_hiragana(randomCard.type.replace(' ', ''))),
      $el('p.rules', convert_to_hiragana(randomCard.text)),
      randomCard.flavorText
        ? $el('p.flavor', convert_to_hiragana(randomCard.flavorText))
        : '',
      randomCard.power ? $el('p.power', `${randomCard.power}`) : '',
    ),
    $el(
      'section.actions',
      $el(
        'button',
        {
          type: 'button',
          '@click': () => {
            cardImage.classList.toggle('revealed');
          },
        },
        convert_to_hiragana('Rivela'),
      ),
      $el(
        'button',
        { type: 'button', '@click': () => render() },
        convert_to_hiragana('Nuova carta'),
      ),
    ),
  );
  document.body.appendChild(main);
};

render();