<script setup>
import { ref, onMounted  } from 'vue';
import izitoast from "./izitoast";

// const numbers = ref(Array(100).fill('')); // Инициализируем массив с пустыми строками
const numbers = ref([]); // Инициализируем массив с пустыми строками
const clickCount = ref(1); // Счетчик нажатий
const listOfTrips = ref([])

onMounted(()=>{
  for (let i = 0; i < 100; i++) {
    numbers.value.push({
      variable: '',
      x: i % 10,
      y: 9 - Math.floor(i / 10),
      index: i
    });
  }
})

function setNumber(item) {
  let valueOfMarker = numbers.value[item.index].variable
  // Если строка пустая, то ставим счётчик
  if (valueOfMarker === '') {
    numbers.value[item.index].variable = clickCount.value;
    clickCount.value++;
  }
  // Если нажали на последнее число, то удаляем его
  else if (valueOfMarker === clickCount.value - 1) {
    numbers.value[item.index].variable = '';
    clickCount.value--;
  }
  // Если нажали на уже заполненную клетку, то выводим сообщение
  else {
    izitoast.info({
      title: 'Информация',
      message: "Удалять можно только последний пункт маршрута"
    })
  }
}

function saveResult() {
  let finallyText = ''
  const timeArr = numbers.value.reduce((acc, curr) => [curr, ...acc], [])
  timeArr.map((item)=>{
    if (item.variable) {
      listOfTrips.value.push(item)
      finallyText += `navigate_wait(${item.x}, ${item.y})\n`
    }
  })
  console.log(finallyText)
  izitoast.info({
    title: 'Информация',
    message: "Посмотри в консоли путь дрона. Ctrl + Shift + I или F12"
  })
}
</script>

<template>
  <div class="grid">
    <div
        class="square"
        v-for="(item, index) in numbers"
        :data-key="index"
        :key="index"
        @click="setNumber(item)"
    >
      {{ item.variable }}
    </div>
  </div>
  <button
    @click="saveResult"
  >Сохранить</button>
</template>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(10, 50px);
  gap: 10px;
}

.square {
  width: 50px;  /* Ширина квадрата */
  height: 50px; /* Высота квадрата */
  background-color: #e0e0e0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.square:hover {
  background-color: #d0d0d0;
}
.square[data-key='90'] {
  background-color: red;
}
</style>
