import ReactDOM from "https://esm.sh/react-dom@18.2.0";
import React from "https://esm.sh/react@18.2.0";
const randRange = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min);

function Main() {
  const [cards, setCards] = React.useState([]);
  const [dealersCount, setDealersCount] = React.useState(randRange(2, 21));
  const [playersCount, setPlayersCount] = React.useState(0);

  const formRef = React.useRef(null);

  const resetCards = () => {
    setCards(
      [...Array(5)].map(() => {
        return {
          suit: ["♣", "♠", "♥", "♦️"][randRange(0, 3)],
          number: randRange(1, 13)
        };
      })
    );
  };
  const reset = () => {
    const formElem = formRef.current;
    if (formElem) {
      formElem.reset();
    }

    resetCards();
    setDealersCount(randRange(2, 21))
    setPlayersCount(0);
  };

  React.useEffect(() => {
    resetCards();
  }, []);

  return (
    <form ref={formRef}>
      <div className="cards">
        {cards.map((card, i) => {
          return (
            <div
              className="card-wrap"
              style={{
                color: ["♣", "♠"].includes(card.suit) ? "black" : "red"
              }}
            >
              <div className="card-base">
                <input
                  className={`card-checkbox card-checkbox-${i}`}
                  type="checkbox"
                  name="card"
                />
                <div className="card-back">
                  <div className="card-back-inner" />
                </div>
                <div className="card-front">
                  <div className="card-front-label-top">
                    {card.suit}
                    {card.number}
                  </div>
                  <div className="card-front-label-middle">{card.suit}</div>
                  <div className="card-front-label-bottom">
                    {card.suit}
                    {card.number}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <button
        onClick={(e) => {
          reset();
          e.preventDefault();
        }}
      >
        Reset
      </button>
      <div>ディーラーの手: {dealersCount}</div>
      <div>自分の手: {playersCount}</div>
      <div>勝敗: プレイヤーの勝ち</div>
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Main />);