<script lang="ts" setup>
import { ref } from 'vue'
import { API_URL } from '@/main.ts'
import { type User, primaryUser } from '@/composable/auth.ts'
import { deleteUser, addUser } from '@/composable/settings'

import UserInfo from '@/components/UserInfo.vue'

const new_user_name = ref('')
const new_user_passwd = ref('')
const new_admin = ref(false)
const userCreationMsg = ref({ message: '', type: 'info' })
const userDeletionMsg = ref({ message: '', type: 'info' })

const onNewUserCreation = async () => {
  addUser(new_user_name.value, new_user_passwd.value, new_admin.value)
    .then(() => {
      userCreationMsg.value = { message: 'User created successfully', type: 'success' }
      new_user_name.value = ''
      new_user_passwd.value = ''
      new_admin.value = false
    })
    .catch((error) => {
      userCreationMsg.value = { message: `${error}`, type: 'error' }
      console.error(error)
    })
}
</script>

<template>
  <main>
    <div v-if="primaryUser.currentUser.value" class="flex flex-wrap space-x-4 space-y-4">
      <div class="boxed">
        <h3>User Profile</h3>
        <p><a class="font-bold">Name:</a> {{ primaryUser.currentUser.value.user }}</p>
        <p><a class="font-bold">Role:</a> {{ primaryUser.currentUser.value.role }}</p>
      </div>
      <template v-if="primaryUser.currentUser.value.role === 'admin'">
        <div class="boxed">
          <h3>Users</h3>
          <table>
            <tr>
              <th class="font-bold">Username</th>
              <th class="font-bold">Role</th>
              <th class="font-bold">Actions</th>
            </tr>
            <tr v-for="user in primaryUser.allUsers.value" :key="user.user">
              <td>{{ user.user }}</td>
              <td>{{ user.role }}</td>
              <td>
                <button
                  @click="
                    () =>
                      deleteUser(user)
                        .then(() => (userDeletionMsg = { message: 'Success', type: 'success' }))
                        .catch((e) => (userDeletionMsg = { message: e, type: 'error' }))
                  "
                >
                  Delete
                </button>
              </td>
            </tr>
          </table>
          <UserInfo :type="userDeletionMsg.type as any" v-if="userDeletionMsg.message">
            <template #default>
              <p>{{ userDeletionMsg.message }}</p>
            </template>
          </UserInfo>
        </div>

        <div class="boxed">
          <h3>New user</h3>
          <input v-model="new_user_name" placeholder="Username" />
          <input v-model="new_user_passwd" type="password" placeholder="Password" />
          <span class="flex flex-row">
            <label for="new_admin">Admin:</label>
            <input v-model="new_admin" id="new_admin" type="checkbox" class="!w-min ml-1" />
          </span>
          <button @click="() => onNewUserCreation()">Create User</button>
          <UserInfo :type="userCreationMsg.type as any" v-if="userCreationMsg.message">
            <template #default>
              <p>{{ userCreationMsg.message }}</p>
            </template>
          </UserInfo>
        </div>
      </template>
      <div v-else>
        <p>You need Admin rights to see the rest...</p>
      </div>
    </div>
  </main>
</template>
