'use strict';
import { serve } from "https://deno.land/std@0.127.0/http/server.ts";
import { h, ssr, tw } from "https://crux.land/nanossr@0.0.3";

let database = {}; //計算問題と解答のセットを保存する
let question = ''; //計算問題
let judgement = ''; //正解か不正解を表示する変数
let color = 'red'; //変数judgementを表示するときの色を指定する

const createQuestion = () => { //計算問題を生成し、databaseに格納する
  //a~eの５つの乱数を生成し、計算問題として表示する
  const a = Math.ceil(Math.random() * 9);
  const b = Math.ceil(Math.random() * 9);
  const c = Math.ceil(Math.random() * 9);
  const d = Math.ceil(Math.random() * 9);
  const e = Math.ceil(Math.random() * 9);
  //databaseのkeyに'計算問題'を、値に'正答'を格納する
  database[`${a} + ${b} − ${c} × ${d} ÷ ${e}`] = a + b - c * d / e;
  //計算問題の解が小数だった場合、問題生成をやり直す
  if (Number.isInteger(a + b - c * d / e) === false) {
    createQuestion();
  }
  //databaseの末尾の要素を取得する
  question = Object.entries(database).pop();
};

//JSXを書くためのコンポーネント
const HTML = props => (
  <main>
    {/*autcomplete属性を記載することで、入力候補を表示させない*/}
    <form class={tw`text-5xl text-center mt-10`} autocomplete='off'>
      <span class={tw``}>
        {question[0]} {/*計算問題を表示*/}
      </span>
      <p>
        = <input class={tw`border border-4 w-32`} name='answer' type='tel' />
        {/*value属性に正答を記載し、ユーザの解答を判定するのに使う*/}
        <button class={tw`border p-4 m-4`} name='correct' value={question[1]}>解答</button>
      </p>
      {/*正解、不正解を色分けして表示する*/}
      <p class={tw`text-${color}-500`}>{judgement}</p>
    </form>
  </main>
);

await serve(req => {
  createQuestion(); //計算問題を生成する
  const value = new URL(req.url).searchParams; //クエリパラメータを取得する
  const answer = Number(value.get('answer'));
  const correct = Number(value.get('correct'));
  //answerが0ではない場合を前提として処理を進める。
  if (answer !== 0) {
    if (answer === correct) { //ユーザの解答が正解だった場合の処理
      judgement = '正解';
      color = 'green';
    } else { //ユーザの解答が不正解だった場合の処理 
      judgement = '不正解';
      color = 'red'
    }
  } else { //answerが0だった場合はページがリロードされ、新しい問題が表示される
    judgement = '';
  }
  return ssr(() => <HTML />); //JSXを記載したコンポーネント、HTMLを表示する。
});