import type { Challenge } from '../challenge/registry.ts';
import { html } from './html.ts';
import { badge, layout } from './layout.ts';

type Box = { x: number; y: number; width: number; height: number };

export function renderChallenge(challenge: Challenge, box: Box | undefined): string {
  const body = html`<article class="post post--challenge" data-challenge="${challenge.id}">
    <header class="post__head">
      ${badge(challenge.platform, challenge.platformLabel)}
      <div class="who"><span class="who__handle">wants you to prove you are a person</span></div>
    </header>

    <p class="challenge__lede">
      Solve it here and the post loads. Drag on the picture exactly as you would on
      ${challenge.platformLabel}.
    </p>

    <div
      class="challenge__stage"
      id="stage"
      data-box="${box ? `${box.x},${box.y},${box.width},${box.height}` : ''}"
    >
      <img id="frame" alt="The verification puzzle" draggable="false">
      <p class="challenge__status" id="status">Loading…</p>
    </div>

    <footer class="post__foot">
      <div class="original">
        <button type="button" class="copy" id="give-up">Give up and show me the link</button>
        <a class="original__open" href="${challenge.originalUrl}" rel="noopener noreferrer nofollow" target="_blank" hidden>
          Open on ${challenge.platformLabel}
        </a>
        <p class="original__url"><code>${challenge.originalUrl}</code></p>
      </div>
    </footer>
  </article>`;

  return layout(`Verify — ${challenge.platformLabel}`, body);
}