document.addEventListener('DOMContentLoaded', () => {
    let cross = {};
    let circle = {};

    const createGameBoard = () => {
      let state = {
        currentPlayer: cross,
        grid: [],
        listeners: new Set()
      };

      for (let i = 0; i < 9; i++) {
        state.grid.push(null);
      }

      const play = (line, column) => {
        if (state.grid[line * 3 + column] !== null) return;

        let currentPlayer = state.currentPlayer;
        state.grid[line * 3 + column] = currentPlayer;
        state.currentPlayer = currentPlayer === cross ? circle : cross;

        state.listeners.forEach(l => {
          l({ line, column, player: currentPlayer });
        });

      };

      const getSquareAt = (line, column) => state.grid[line * 3 + column];

      const addEventListener = listener => {
        state.listeners.add(listener);
      };

      const checkWin = () =>{
        for(let i=0;i<state.grid.length;i++){

            if(state.grid[i] === cross && state.grid[i+1] === cross && state.grid[i+2] === cross){
                return true
            }
            else if (state.grid[i] === circle && state.grid[i+1] === circle && state.grid[i+2] === circle){
                return true
            }
            else if(state.grid[i] === cross && state.grid[i+3]===cross && state.grid[i+6] === cross){
                return true
            }
            else if(state.grid[i] === circle && state.grid[i+3]===circle && state.grid[i+6] === circle){
                return true
            }
            else if(state.grid[i+2] === cross && state.grid[i+5]===cross && state.grid[i+8] === cross){
                return true
            }
            else if(state.grid[i+2] === circle && state.grid[i+5]===circle && state.grid[i+8] === circle){
                return true
            }
            else if(state.grid[i] === cross && state.grid[i+4]===cross && state.grid[i+8] === cross){
                return true
            }
            else if(state.grid[i] === circle && state.grid[i+4]===circle && state.grid[i+8] === circle){
                 return true
            }
        }
        return false;
      }
      const removeEventListener = listener => {
        state.listeners.delete(listener);
      };

      return {
        play,
        getSquareAt,
        addEventListener,
        checkWin
      }
    };

    let gameBoard = createGameBoard();

    const appendSeparatorDiv = element => {
      let separatorDiv = document.createElement('div');
      separatorDiv.innerHTML = '+-+-+-+';
      element.appendChild(separatorDiv);
    };

    let gameBoardDiv = document.createElement('div');
    gameBoardDiv.setAttribute('style', 'font-family: monospace;');
    appendSeparatorDiv(gameBoardDiv);

    let colSpans = [];
    for (let line = 0; line < 3; line++) {
      let lineDiv = document.createElement('div');
      lineDiv.appendChild(document.createTextNode('|'));

      for (let column = 0; column < 3; column++) {
        let square = gameBoard.getSquareAt(line, column);

        let colSpan = document.createElement('span');
        if (square === cross) colSpan.innerHTML = 'X';
        else if (square === circle) colSpan.innerHTML = 'O';
        else colSpan.innerHTML = '&nbsp;';

        colSpan.addEventListener('click', () => {
          gameBoard.play(line, column);
          if (gameBoard.checkWin()){
            let win = document.createElement('div');
            win.innerHTML = '<h1>YOU WIN</h1>';
            appDiv.appendChild(win);

          }
        });

        colSpans.push(colSpan);

        lineDiv.appendChild(colSpan);
        lineDiv.appendChild(document.createTextNode('|'));
      }

      gameBoardDiv.appendChild(lineDiv);
      appendSeparatorDiv(gameBoardDiv);
    }

    let appDiv = document.getElementById('app');
    appDiv.appendChild(gameBoardDiv);

    gameBoard.addEventListener(e => {
      let colSpan = colSpans[e.line * 3 + e.column];
      if (e.player === cross) colSpan.innerText = 'X';
      else if (e.player === circle) colSpan.innerText = 'O';
    });

  });