<template>
  <Form v-slot="$form" class="flex flex-row">
    <Card class="detailCard flex">
      <template #title>
        {{ table.table_name }}
      </template>
      <template #subtitle>
        Status:
        <Chip :class="table.active ? 'active' : 'inactive'" :label="table.active ? 'active' : 'inactive'" />
      </template>
      <template #footer>
        <Button class="button-box" label="Start" />
        <Button class="button-box" label="Stop" />
        <Button class="button-box" label="Delete" />
      </template>
    </Card>

    <Card class="detailCard flex">
      <template #title>
        Edit Details
      </template>
      <template #content>
        <div class="flex flex-column">
          <InputText class="button-box" name="tableName" type="text" placeholder="Table Name" v-model="tableName" />
          <InputText class="button-box" name="tableLink" type="text" placeholder="Table Link" v-model="tableLink" />
        </div>
      </template>
      <template #footer>
        <Button class="button-box" label="Save" />
        <Button class="button-box" label="Clear" />
      </template>

    </Card>
  </Form>
</template>

<style>
@import "primeicons/primeicons.css";

.active {
  --p-chip-color: green;
}

.inactive {
  --p-chip-color: red;
}

.detailCard {
  margin: 25px;
}

.button-box {
  margin: 5px;
}
</style>

<script setup lang="ts">
import axios from 'axios'
import { reactive, ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { Form } from '@primevue/forms'
import InputText from 'primevue/inputtext'
import Button from 'primevue/button'
import Card from 'primevue/card'
import Chip from 'primevue/chip'

const route = useRoute()
const table = reactive({
  table_name: 'default',
  table_link: 'default',
  active: 0,
})

const tableName = ref()
const tableLink = ref()

onMounted(() => {
  axios.get(`http://localhost/api/tables/${route.params.id}`).then((resp) => {
    table.table_name = resp.data.table_name
    table.table_link = resp.data.table_link
    table.active = resp.data.active
    tableName.value = resp.data.table_name
    tableLink.value = resp.data.table_link
  })
})

watch(
  () => route.params.id,
  (newValue, oldValue) => {
    console.log(newValue)
    axios.get(`http://localhost/api/table/${newValue}`).then((resp) => {
      table.table_name = resp.data.table_name
      table.table_link = resp.data.table_link
      table.active = resp.data.active
    })
  },
)
</script>
