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

import cardData from './card-data.json';
import './index.css';

interface Card {
  manaCost: string;
  name: string;
  type: string;
  text: string;
  flavorText: string;
  power?: number;
  toughness?: number;
  italianImage: string;
  image: string;
}

const cards = cardData as Card[];

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

let main = $el('main');

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

  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} / ${randomCard.toughness}`)
        : '',
    ),
    $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();