const board = document.getElementById("game-board");

class Card {
  constructor(value) {
    this.value = value;
    this.element = null;
    this.isEmptyCard = false;
    this.init();
  }
  init() {
    this.generateFlipCard();
  }

  generateFlipCard() {
    const flipCard = document.createElement("div");
    const frontCard = document.createElement("div");
    const backCard = document.createElement("div");
    flipCard.className = "card";
    frontCard.className = "card-front";
    backCard.className = "card-back";
    flipCard.appendChild(frontCard);
    flipCard.appendChild(backCard);
    backCard.textContent = this.value;
    this.element = flipCard;
  }

  replaceWith() {
    const emptyCard = document.createElement("div");
    emptyCard.className = "empty-card";
    this.element.replaceWith(emptyCard);
    this.element = emptyCard;
    this.isEmptyCard = true;
  }

  toggleClass() {
    if (!this.isEmptyCard) {
      this.element.classList.toggle("card-clicked");
    }
  }

  getElement() {
    return this.element;
  }
}

class MemomryBoard {
  constructor(size, boardElement) {
    this.boardSize = size;
    this.boardElement = boardElement;
    this.init();
  }

  init() {
    this.cardNumber = [];
    this.nodeMap = new WeakMap();
    this.viewedCards = [];
    this.timer = null;
    this.disableClick = false;
    this.removedCards = 0;
    this.boardElement.innerHTML='';
    this.generateCardNumber();
    this.shuffleCards();
    this.addToDom();
  }
  generateCardNumber() {
    const cardNumber = (this.boardSize * this.boardSize) / 2;
    for (let i = 1; i <= cardNumber; i++) {
      const cardOne = new Card(i);
      const cardTwo = new Card(i);
      this.nodeMap.set(cardOne.getElement(), cardOne);
      this.nodeMap.set(cardTwo.getElement(), cardTwo);
      this.cardNumber.push(cardOne);
      this.cardNumber.push(cardTwo);
    }
  }

  addToDom() {
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < this.cardNumber.length; i++) {
      fragment.appendChild(this.cardNumber[i].getElement());
    }

    this.boardElement.appendChild(fragment);
    this.bindEvents();
     }

  shuffleCards() {
    const length = this.cardNumber.length;
    for (let i = 0; i < length; i++) {
      const index = Math.floor(Math.random() * length);
      const temp = this.cardNumber[i];
      this.cardNumber[i] = this.cardNumber[index];
      this.cardNumber[index] = temp;
    }
  }

  startTimer(){
   this.timer = setTimeout(this.timerCallback.bind(this),3000);
  }

  timerCallback(){
   const length = this.viewedCards.length;
   if(length === 2){
    const [cardOne,cardTwo] = this.viewedCards;
    if(cardOne.value === cardTwo.value){
      cardOne.replaceWith();
      cardTwo.replaceWith();
      this.removedCards+=2;
    }else {
      cardOne.toggleClass();
      cardTwo.toggleClass();
    }
    this.viewedCards = [];
    this.disableClick = false;
    this.checkIfMatchCompleted();
   }else if(length === 1){
    const card = this.viewedCards.pop();
    card.toggleClass();
   } 
  }
  bindEvents(){
    this.boardElement.addEventListener("click", (event) => {
      if(!this.disableClick){
      const parentElement = event.target.parentElement;
      const haveClass = parentElement.classList.contains('card-clicked');
      if (this.nodeMap.has(parentElement)&&!haveClass) {
        const card = this.nodeMap.get(parentElement);
        this.viewedCards.push(card);
        if(this.viewedCards.length ===2){
          this.disableClick = true;
        }
        card.toggleClass();
        clearTimeout(this.timer);
        this.startTimer();
      }
    }
    });
  
  }
  checkIfMatchCompleted(){
    if(this.removedCards === this.boardSize*this.boardSize){
      this.boardElement.innerHTML = '';
      const button = document.createElement('button');
      button.className = 'button-6';
      button.textContent = 'Play Again';
      this.boardElement.appendChild(button);
      button.addEventListener('click',()=>{
        this.init();
      })
    }
  }
}

const Game = new MemomryBoard(6, board);