<template>
  <div
    class="dark:text-white container mx-auto h-full flex justify-center items-center"
  >
    <table class="table-auto shadow-lg">
      <thead>
        <tr>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Name
          </th>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            ID
          </th>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Default Prefix
          </th>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="site in sites">
          <td class="border px-8 py-4">{{ site.name }}</td>
          <td class="border px-8 py-4">{{ site.id }}</td>
          <td class="border px-8 py-4">{{ site.default_prefix }}</td>
          <td>
            <router-link
              :to="{ name: 'CreateAccessPoint', query: { 'site-id': site.id } }"
              class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
              >Create AP</router-link
            >
            <router-link
              :to="{ name: 'AccessPoints', query: { 'site-id': site.id } }"
              class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
              >Show APs</router-link
            >
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div
    class="dark:text-white container mx-auto h-full flex justify-center items-center mt-12"
  >
    <h1 class="font-hairline mb-6 text-center">New Site</h1>
    <form @submit.prevent="createSite">
      <label
        >Name
        <input
          type="text"
          class="text-black"
          v-model="newSiteName"
          placeholder="Name"
        />
      </label>
      <label>
        Default Prefix
        <input
          type="text"
          class="text-black"
          v-model="newDefaultPrefix"
          placeholder="Default Prefix"
        />
      </label>
      <button
        class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
        type="submit"
      >
        Create!
      </button>
    </form>
  </div>
</template>

<script lang="ts">
import {
  getSites as apiGetSites,
  Site,
  createSite as apiCreateSite,
} from "../api";
import { reactive, ref } from "vue";

export default {
  name: "Sites",
  async setup() {
    const sites = reactive<Site[]>([]);
    async function getSites() {
      await apiGetSites().then((s) => void Object.assign(sites, s));
    }
    await getSites();

    const newSiteName = ref("");
    const newDefaultPrefix = ref("");
    async function createSite() {
      try {
        const site: Site = {
          name: newSiteName.value,
          default_prefix: newDefaultPrefix.value,
        };
        let newSite = await apiCreateSite(site);
        console.log(newSite);
        await getSites();
        newSiteName.value = "";
        newDefaultPrefix.value = "";
      } catch (e) {
        console.log(e);
      }
    }

    return { sites, newSiteName, newDefaultPrefix, createSite };
  },
};
</script>

<style scoped></style>
