<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">
            Location
          </th>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Model
          </th>
          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
            Comment
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="ap in aps">
          <td class="border px-8 py-4">{{ ap.ap_name }}</td>
          <td class="border px-8 py-4">{{ ap.location }}</td>
          <td class="border px-8 py-4">{{ ap.model }}</td>
          <td class="border px-8 py-4">{{ ap.comment }}</td>
          <td>
            <router-link
              :to="{ name: 'EditAccessPoint', query: { 'ap-id': ap.id } }"
              class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
              >Edit</router-link
            >
            <router-link
              v-if="ap.registered_user_id == null"
              :to="{ name: 'RegisterAccessPoint', query: { 'ap-id': ap.id } }"
              class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
              >Register</router-link
            >
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
import { getAccessPointDetails, AccessPoint } from "../api";

export default {
  name: "AccessPoints",
  props: {
    siteID: {
      type: Number,
      required: false,
    },
  },
  async setup(props: { siteID?: number }) {
    const { siteID } = toRefs(props);
    const aps = reactive<AccessPoint[]>([]);
    async function getAccessPoints() {
      try {
        await getAccessPointDetails(siteID?.value).then(
          (a) => void Object.assign(aps, a)
        );
      } catch (e) {
        console.error(e);
      }
    }
    await getAccessPoints();

    return { aps };
  },
};
</script>

<style scoped></style>
