<template>
  <q-page padding>
    <q-table
      title="Game Rounds"
      :rows="gameData"
      :columns="columns"
      row-key="id"
      :sort-method="sortByPlayedAt"
    >
      <template v-slot:body-cell-end_points="props">
        {{ calculateEndPoints(props.row) }}
      </template>
    </q-table>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'

// Sample data
const gameData = ref([
  { id: 1, game: 2, user: 1, round_number: 1, start_points: 0, first_throw: 50, second_throw: 0, third_throw: 0, end_points: 0, played_at: "2025-09-14T16:42:53.000Z" },
  { id: 2, game: 2, user: 1, round_number: 1, start_points: 0, first_throw: 3, second_throw: 17, third_throw: 0, end_points: 0, played_at: "2025-09-14T16:45:08.000Z" },
  { id: 3, game: 2, user: 1, round_number: 1, start_points: 0, first_throw: 50, second_throw: 2, third_throw: 0, end_points: 0, played_at: "2025-09-14T16:49:12.000Z" },
  { id: 4, game: 2, user: 1, round_number: 1, start_points: 0, first_throw: 4, second_throw: 0, third_throw: 17, end_points: 0, played_at: "2025-09-14T16:52:33.000Z" },
  { id: 5, game: 2, user: 1, round_number: 1, start_points: 0, first_throw: 3, second_throw: 2, third_throw: 0, end_points: 0, played_at: "2025-09-14T16:55:24.000Z" },
  { id: 6, game: 2, user: 3, round_number: 1, start_points: 0, first_throw: 50, second_throw: 17, third_throw: 0, end_points: 0, played_at: "2025-09-14T16:56:28.000Z" },
  { id: 7, game: 2, user: 2, round_number: 1, start_points: 0, first_throw: 3, second_throw: 19, third_throw: 0, end_points: 0, played_at: "2025-09-14T16:58:06.000Z" }
])

// Table columns
const columns = [
    { name: 'round_number', label: 'Round', field: 'round_number', align: 'left' },
    { name: 'user', label: 'User', field: 'user', align: 'left' },

    { name: 'first_throw', label: 'Throw 1', field: 'first_throw', align: 'left' },
    { name: 'second_throw', label: 'Throw 2', field: 'second_throw', align: 'left' },
    { name: 'third_throw', label: 'Throw 3', field: 'third_throw', align: 'left' },

    { name: 'end_points', label: 'End Points', field: 'end_points', align: 'left' },
]   

// Custom sort by played_at
function sortByPlayedAt(a, b) {
  return new Date(a.played_at) - new Date(b.played_at)
}

// Calculate total points for a row
function calculateEndPoints(row) {
  return row.first_throw + row.second_throw + row.third_throw
}
</script>
