<template>
<div class="container">
    <!-- <span  style="cursor: pointer; font-size: 35px; position: absolute; left: 20px;" class="float-start" @click="isMuted = !isMuted">
    <i class="fa fa-volume-up" v-if="!isMuted"></i>
    <i class="fa fa-volume-off" v-else></i>
    </span> -->
  <header>
      <h1 class="my-2">
        <img src="../assets/logo.png" lazy alt="Logo" width="40" /> Tic Tac Toe
    <div class="form-check form-switch d-inline-block" id="toggle" style="font-size: 20px;" v-show="!gameStart">
      <input
        class="form-check-input"
        type="checkbox"
        role="switch"
        v-model="isRow"
      />
    </div>

      </h1>
  </header>

  <div :class="[isRow?'row':'text-center']">

  <!-- !Controls and Message Section -->
  <section :class="[isRow?'col-md-6 col-sm-12':'']">
      <!-- Computer Switch -->
    <div class="form-check form-switch switch" v-show="!gameStart">
      <input
        class="form-check-input"
        type="checkbox"
        role="switch"
        id="flexSwitchCheckDefault"
        v-model="isComputer"
        :disabled="gameStart"
      />
      <label class="form-check-label mx-2" for="flexSwitchCheckDefault"
        >Computer</label>
    </div>


    <transition-group
    name="custom-classes-transition"
    enter-active-class="animated bounceIn"
    leave-active-class="animated bounceOut"
    tag="ul"
  >
    <h1 class="text-black" v-if="gameStart">Round : {{round}}</h1>


      <h4 v-if="gameStart&&isComputer" style="
        border: 2px solid skyblue;
      " class="alert font-weight-bold text-black d-inline-block">
        <span>
          <i class="fa fa-desktop text-primary"></i> Computer in
          <i class="fa fa-dashboard text-black mx-1"></i>
             <strong class="text-decoration-underline">   {{ level }} </strong> mode
        </span>
      </h4>
    </transition-group>

    <div
      v-if="!gameStart && isComputer"
      class="d-flex justify-content-center my-2"
    >
      <select
        name="level"
        v-model="level"
        id="level"
        class="form-select"
        :disabled="usedBoxes > 0"
      >
        <option value="hard" default>Choose Difficulty Level (Default Hard)</option>
        <option value="noob">Noob</option>
        <option value="easy">Easy</option>
        <option value="medium">Medium</option>
        <option value="hard">Hard</option>
      </select>
    </div>

    <h4
      class="p-2 alert-warning d-inline-block rounded-2"
      v-if="!isComputer"
    >
      Player Move : "{{ player }}"
    </h4>
 <!-- </transition-group> -->

    <h1 v-if="winner == 'draw'" :style="!isComputer?{fontSize: '50px'}:{}" class="alert alert-warning">Its A Draw!</h1>
    <h1
      class="text-center mx-2 alert alert-success"
      :class="[isComputer && winner === 'O' ? 'alert-danger' : 'alert success']"
      v-if="winner != 'draw' && winner"
    >
      <span v-if="!isComputer">
        <strong v-if="winner != 'draw'">🎉 Player {{ winner }} wins! </strong>
      </span>
      <span v-else
        >🎉
        <strong v-if="winner == 'X'">You</strong>
        <strong v-else>Computer</strong>
        Wins!
      </span>
    </h1>

    </section>

    <!-- !Game Board Section -->
  <section :class="[isRow?'col-md-6 col-sm-12':'']">

  <!-- !Main Game Board -->
    <div class="board d-block margin-auto">
      <div v-for="(row, x) in squares" :key="x" class="row">

        <div
          v-for="(square, y) in row"
          :key="y"
          @click="move(x, y)"
          class="col square"
          :class="[winBoxes[x][y]==='win'?'winBox':'', squareClasses[x][y]]"
        >
    <transition
    name="custom-classes-transition-{{x}}-{{y}}"
    enter-active-class="animated bounceIn"
    leave-active-class="animated bounceOut">
          {{ square }}
    </transition>
        </div>
      </div>
    </div>
    </section>

  </div>
    <!-- </transition-group> -->


      <section class="d-flex justify-content-around">
        <div
          style="border-radius: 16px"
          class="btn btn-block btn-outline-danger my-2 ml-2"
          @click="restart"
        >
          Restart <i class="fa fa-refresh"></i>
        </div>

        <div
          style="border-radius: 16px"
          class="btn btn-block btn-outline-success my-2"
          @click="next"
        >
          Next Round <i class="fa fa-arrow-right"></i>
        </div>
      </section>
    <!-- !Game Status - Points, Round -->
    <footer class="mt-3 gameStatus" >
      <div class="d-flex p-1 flex-wrap justify-content-around">
        <h5 class="rounded-pill text-primary font-weight-bolder">
          <span v-if="isComputer"><i class="fa fa-user"></i> You</span>
          <span v-else><i class="fa fa-user-circle"></i> Player X</span>:
          <span class="font-weight-bold">{{ playerXPoints }}</span>
        </h5>
        <!-- <h5 class="p-2 rounded-pill d-block font-weight-bold text-black">
          <span><i class="fa fa-gamepad"></i> Round : </span>
          <span class="font-weight-bold" style="font-weight: bold">{{
            round
          }}</span>
        </h5> -->
        <h5 class="rounded-pill text-danger">
          <span v-if="isComputer"><i class="fa fa-desktop"></i> Computer</span>
          <span v-else><i class="fa fa-user-circle"></i> Player Y</span> :
          <span class="font-weight-bold">{{ playerOPoints }}</span>
        </h5>
      </div>
    </footer>

  </div>
</template>

<script>
import { reactive, toRefs, ref, computed} from "vue";
export default {
  name: "Board",
  setup() {
    //* Initialize all sounds for the game
    const audio = new Audio("musics/ting.mp3");

    const squares = ref([
      ["", "", ""],
      ["", "", ""],
      ["", "", ""],
    ]);

    const utils = reactive({
      player: "X",
      gameEnd: computed(() => {
        return Boolean(winner.value);
      }),
      color: computed(() => {
        return utils.gameEnd ? "rgb(233,233,233)" : "none";
      }),
      level: "hard",
      isComputer: true,
      usedBoxes: computed(() => {
        return squares.value.flat().filter((x) => x !== "").length;
      }),
      leftBoxes: computed(() => {
        return squares.value.flat().filter((x) => x === "").length;
      }),
      gameStart: computed(()=> {
        return utils.usedBoxes>0||utils.round>1
      }),
      playerXPoints: 0,
      playerOPoints: 0,
      round: 1,
      isRow: true,
      playFont: computed(()=> {
        if (utils.isRow) return "75px"
        else return "75px"
      }),
      squareSize: computed(()=> {
        if(utils.isRow) return "120px"
        else return "100px"
      }),
      winBoxes : [
        ["","",""],
        ["","",""],
        ["","",""]
      ],
      conditionThatMatched : "",  
      //Classes for squares
      squareClasses: [
        ["top left","top middle","top right"],
        ["left", "middle","right"],
        ["bottom left","bottom middle","bottom right"]
      ],
      soundsPath: "musics",
      //Marking color to mark the win conditions used in css
      markingColor: computed(()=> {
          return "#ff0111" //Red
      }),
      isMuted: false,
    });

    const winConditions = [
      //Vertically- rows
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      //Horizontally- columns
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      //Corner
      [0, 4, 8],
      [2, 4, 6],
    ];

    //Play Sound Method
    const playSounds = async (action) => {
      if(action==="move"){
        audio.play();
      }
    }

     const winner = computed(() => {
      const win = findWinner(squares.value.flat());
      if (!win && utils.usedBoxes === 9) {
        updatePlayerPoints("draw");
        return "draw";
      }
      if(win==="X"||win==="O") updateWinBoxes(utils.winBoxes.flat())
      if(win) playSounds("move")
      updatePlayerPoints(win);
      return win;

    });

    //* For marking the boxes which matches the win conditions
    //* Take utils.winBoxes.flat() as argument
    const updateWinBoxes = (winBoxesFlat)=> {
      utils.conditionThatMatched.forEach((c)=> {
        winBoxesFlat[c] = "win"
      })
      utils.conditionThatMatched = "" //Empty the conditions
      utils.winBoxes = array1dTo2d(winBoxesFlat)
    }

    const move = (x, y) => {
      if (squares.value[x][y] === "" && !utils.gameEnd) {
        squares.value[x][y] = utils.player;
        playerSwap(); //!Swap the player to "O"
        if (utils.isComputer&&!winner.value) executeComputer(); //!Running Computer Move
      }
    };

    const executeComputer = () => {
      if (utils.player === "O" && utils.usedBoxes < 9) {
        const newSquares = computerChoice(squares.value.flat());
        squares.value = newSquares;
        // playSounds("move")
      }
    };

    //* Swap player between 'X' and 'O'
    const playerSwap = () => {
      utils.player = utils.player === "X" ? "O" : "X";
    };

     //* Generating Computer choice
     //! Dealing with flat array of 2D squares array
    const computerChoice = (square) => {
      let choice;
      choice = smartChoice(square, utils.level);
      if (choice === null) {
        do {
          choice = Math.floor(Math.random() * 9); //Random number between 0-8
        } while (square[choice] !== "");
      }
      square[choice] = utils.player;
      playerSwap(); //!Swap the player to 'X' again
      return array1dTo2d(square)
    };

    //* Player is X or O and square is squares.value.flat()
    const findWinChances = (square, player)=> {
      for (let conditions of winConditions) {
          const [a, b, c] = conditions;
          if (square[a] === "" && square[b] === player && square[c] === player) return a;
          else if (square[b] === "" && square[a] === player && square[c] === player) return b;
          else if (square[c] === "" && square[a] === player && square[b] === player) return c;
      }
          return null
    }

    //? Making the computer understand the action based on the positions and user actions
    const smartChoice = (square, level) => {
        let returnPosition;
        //! Level Hard
        if(level==="hard"){
          //* Priotorize computer's win possibilities
          returnPosition = findWinChances(square, "O")
          //*If there is no chances for computer then find the user win possibilites and prevent from winning
          if(returnPosition == null) returnPosition = findWinChances(square, "X")
        }

        //! Level Medium
        else if (level==="medium") {
          //* Prevent the user from winning
          returnPosition = findWinChances(square, "X")
        }
        else if (level==="easy") {
          //* Only focuses on computer win. Don't prevent user from winning
          returnPosition = findWinChances(square, "O")
        }
        else if (level==="noob"){
          //* Randomly Make all Choices
          returnPosition = null
        }
        return returnPosition
    };

    //* For converting squares flat array to 2D again
    const array1dTo2d = (array)=> {
      const newArray = [];
      while (array.length) newArray.push(array.splice(0, 3));
      return newArray;
    }

    //* Update the points
    const updatePlayerPoints = (winner) => {
      if (winner) {
        if (winner === "X") {
          utils.playerXPoints = utils.playerXPoints + 1;
        } else if (winner === "O") {
          utils.playerOPoints = utils.playerOPoints + 1;
        }
      }
    };

    //* find winner along with the winConditions
    //* Returns the winner 'X' or 'O'
    const findWinner = (square) => {
      for (const conditions of winConditions) {
        const [a, b, c] = conditions;
        if (square[a] && square[a] === square[b] && square[a] === square[c]) {
          utils.conditionThatMatched = [a,b,c] //For accessing the boxes
          return square[a]; // Returns player that matches all conditions
        }
      }
      return "";
    };

    const restart = () => {
      if (confirm("Do you really want to restart the game?")) {
        utils.player = "X";
        utils.playerXPoints = 0;
        utils.playerOPoints = 0;
        utils.round = 1;
        squares.value = [
          ["", "", ""],
          ["", "", ""],
          ["", "", ""],
        ];
      utils.winBoxes = [
        ["", "", ""],
        ["", "", ""],
        ["", "", ""],
      ]
      }
    };

    const next = () => {
      if (winner.value) {
        utils.player = "X";
        squares.value = [
          ["", "", ""],
          ["", "", ""],
          ["", "", ""],
        ];
        utils.winBoxes = [
          ["", "", ""],
          ["", "", ""],
          ["", "", ""],
        ]
        utils.round += 1;
      } else {
        alert("Can't go to next round until finis current round.");
      }
    };


    return {
      ...toRefs(utils),
      move,
      squares,
      winner,
      next,
      restart,
    };
  },
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@500&family=Varela+Round&display=swap");
.board {
  max-width: fit-content;
  display: block;
  margin: auto;
}
:root {
  animation-duration: 1s;
}
h1 {
  font-family: "Varela Round", sans-serif;
  font-size: 2rem;
}

.alert {
  padding: 8px !important;
  border-radius: 30px!important;
}

.square {
  color: black;
  width: v-bind(squareSize);
  height: v-bind(squareSize);
  border: 2px solid black;
  border-radius: 2px;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: v-bind(playFont);
  text-align: center;
  cursor: pointer;
  background: v-bind(color);
  font-family: "Varela Round", sans-serif;
}
.square:hover {
  background: rgb(233,233,233);
}

.winBox {
  color: v-bind(markingColor);
  background: rgb(255, 255, 255)!important;
}

.activeBox {
  background: skyblue;
}

.switch {
  display: flex;
  justify-content: center;
  font-size: 29px;
  cursor: pointer !important;
}
input {
  cursor: pointer;
}
h5,
h4,
h3 {
  font-family: "Kanit", sans-serif;
}

.gameStatus {
  font-size: 30px !important;
}
footer {
  border: 2px dashed rgb(68, 68, 68);
  border-radius: 30px;
}

#level{
  width: 330px;
}

/* Squares Classes */
.top{
  border-top: none!important;
}

.bottom{
  border-bottom: none!important;
}

.left{
  border-left: none!important;
}

.right{
  border-right: none!important;;
}

@media screen and (max-width: 766px) {
  #toggle{
    display: none;
  }  
}
@media screen and (max-width: 370px) {
  .square {
    width: 90px!important;
    height: 90px!important;
    font-size: 60px!important;
  }
  #level {
    width: 250px;
  }
}
</style>