<script setup lang="ts">

import { ref, onMounted } from 'vue'

import axios from 'axios'
import Button from 'primevue/button'
import DataTable from "primevue/datatable"
import Column from "primevue/column"
import Card from "primevue/card"

const allTables = ref()
const activeTables = ref()

onMounted(() => {
  activeTables.value = [
    {
      tableName: "Table-One",
      link: "vtt.cyberpunkrush.co/table-one"
    }
  ]

  axios.get('http://localhost/api/tables').then((resp) => allTables.value = resp.data)
  axios.get('http://localhost/api/active_tables').then((resp) => activeTables.value = resp.data)
})

function startTable(tableId: number) {
  const activate = axios.get(`http://localhost/api/tables/${tableId}:start`);
  activate.then((resp) => axios.get('http://localhost/api/tables')).then((resp) => allTables.value = resp.data)
  activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
}

function stopTable(tableId: number) {
  const activate = axios.get(`http://localhost/api/tables/${tableId}:stop`);
  activate.then((resp) => axios.get('http://localhost/api/tables')).then((resp) => allTables.value = resp.data)
  activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
}

</script>


<style>
.ActiveTables {
  margin: 20px;

  h2 {
    padding-left: 15px;
  }

  .ATTables {
    padding-left: 50px;
  }

  .button-box {
    padding: 10px;
  }
}
</style>

<template>
  <Card class="ActiveTables">
    <template #title>
      <h2>Active Tables</h2>
    </template>

    <template #content>
      <DataTable :exportable="false" :value="activeTables">
        <Column field="table_name" header="Table Name" />
        <Column field="table_link" header="Table Link">
          <template #body="slotProps">
            <a :href="slotProps.data.table_link">{{slotProps.data.table_link}}</a>
          </template>
        </Column>
        <Column header="Close">
          <template #body="slotProps">
            <Button label="Close" @click="stopTable(slotProps.data.id)"/>
          </template>
        </Column>
      </DataTable>
    </template>
  </Card>

  <Card class="ActiveTables">
    <template #title>
      <h2>All Tables</h2>
    </template>

    <template #content>
      <DataTable class="ATTables" style="" :exportable="false" :value="allTables">
        <Column field="table_name" header="Table Name" />
        <Column field="table_link" header="Table Link" />
        <Column header="Close">
          <template #body="slotProps">
            <Button label="Start" @click="startTable(slotProps.data.id)" />
          </template>
        </Column>
      </DataTable>
      <div class="button-box flex justify-content-end">
        <Button label="New Table"/>
      </div>
    </template>
  </Card>
</template>
