<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import InputText from 'primevue/inputtext'
import Button from 'primevue/button'
import Card from 'primevue/card'
import Select from 'primevue/select'
import FloatLabel from 'primevue/floatlabel';

const router = useRouter()
const table_name = ref()
const table_link = ref()
const version = ref()

const availableVersion = ref([11, 12])

function saveTable() {
  axios
    .post('/api/tables', {
      table_name: table_name.value,
      table_link: table_link.value,
      version: version.value,
    })
    .then(() => router.push({ name: 'home' }))
}

function clear() {
  table_name.value = null
  table_link.value = null
  version.value = null
}
</script>

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

.detailCard {
  margin: 25px;
}

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

<template>
  <Card class="detailCard flex">
    <template #title> New Table Details </template>
    <template #content>
      <div class="flex flex-column">
        <FloatLabel variant="on">
          <InputText id="table_name" class="button-box w-full" type="text" v-model="table_name" />
          <label for="table_name">Table Name</label>
        </FloatLabel>

        <FloatLabel variant="on">
          <InputText id="table_link" class="button-box w-full" type="text" v-model="table_link" />
          <label for="table_link">Table Link</label>
        </FloatLabel>

        <FloatLabel variant="on">
          <Select id="table_version" class="button-box w-full" v-model="version" :options="availableVersion"></Select>
          <label for="table_version">Foundry Version</label>
        </FloatLabel>
      </div>
    </template>
    <template #footer>
      <Button class="button-box" label="Save" @click="saveTable()" />
      <Button class="button-box" label="Clear" @click="clear()" />
    </template>
  </Card>
</template>
