<script lang="ts" setup>
import { store } from "../main.ts";
import { callApi } from "@/services/api.ts";
import { ref } from "vue";

const CustomRequest = ref("");
</script>

<template>
    <h1>Test page</h1>
    <table class="test" style="width: 100%">
        <tbody>
            <tr>
                <td>Is Currently Authenticated ?</td>
                <td>{{ store.authenticated }}</td>
                <td>
                    <button @click="store.login">Login</button>
                </td>
                <td>
                    <button @click="store.logout">Logout</button>
                </td>
                <td>
                    <button @click="store.signup">Signup</button>
                </td>
            </tr>
            <tr>
                <td>current token</td>
                <td>{{ store.user.token }}</td>
                <td>
                    <button @click="store.refreshUserToken">Refresh</button>
                </td>
            </tr>
            <tr>
                <td>Current refresh token</td>
                <td>{{ store.user.refreshToken }}</td>
            </tr>
            <tr>
                <td>Entrepreneur API call</td>
                <td>
                    <button @click="callApi('random')">call</button>
                </td>
                <td>res</td>
                <td></td>
            </tr>
            <tr>
                <td>Admin API call</td>
                <td>
                    <button @click="callApi('random2')">call</button>
                </td>
                <td>res</td>
                <td></td>
            </tr>
            <tr>
                <td>Unauth API call</td>
                <td>
                    <button @click="callApi('unauth/dev')">call</button>
                </td>
                <td>res</td>
                <td id="3"></td>
            </tr>
            <tr>
                <td>
                    <input v-model="CustomRequest" placeholder="edit me" />
                </td>
                <td>
                    <button @click="callApi(CustomRequest)">call</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<style scoped>
table {
    width: 100px;
    table-layout: fixed;
}

tr {
    width: 100%;
    height: 100%;
}

td {
    border: solid 1px black;
    width: 20%;
    height: 100%;
    overflow: hidden;
}
</style>