<template>
  <div class="wrapper">
    <Modal title="CreateUser" :isActive="showCreateUser" @close="showCreateUser=false" acceptText="Create" @accept="createUser()">
      test
    </Modal>
    <nav class="level">
      <div class="level-left">
        <div class="level-item">
          <p class="subtitle">
            <i class="fa fa-users"></i>&nbsp;Users
          </p>
        </div>
      </div>
      <div class="level-right">
        <!-- <div class="level-item">
          <a href="#" class="button is-success">
            <i class="fa fa-plus"></i>&nbsp;Add a new Child
          </a>
        </div>-->
        <div class="level-item">
          <a class="button is-primary" @click="showCreateUser=true">
            <i class="fa fa-plus"></i>&nbsp;Create User
          </a>
        </div>
      </div>
    </nav>
    <table
      class="table is-striped is-bordered is-narrow is-hoverable is-fullwidth"
      style="vertical-align: center;"
    >
      <thead>
        <tr>
          <th>uid</th>
          <th>avatar</th>
          <th>name</th>
          <th>email</th>
          <th>admin</th>
        </tr>
      </thead>
      <tr v-for="user in users" :key="user.id">
        <td class="m-t-a m-b-a">{{user.id}}</td>
        <td>
          <figure class="image is-48x48">
            <img :src="user.avatar" class="is-avatar is-rounded" />
          </figure>
        </td>
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>
          <input class="checkbox" type="checkbox" :checked="user.is_admin" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import ChildAvatar, { IChildAvatar } from "../components/child_avatar.vue";
import Services from "../../services/index";
import { mapGetters, mapActions } from "vuex";
import Modal from "../../shared/components/Modal/Modal.vue";

export default {
  name: "Home",
  components: {
    ChildAvatar,
    Modal
  },
  methods: {
    createUser(){
      alert('created');
    },
    ...mapActions(["getUsers"])
  },
  async created() {
    this.loading = true;
    if (this.users === null) await this.getUsers();
    this.loading = false;
    // this.connections = await Services.ApiService.getConnections();
    // this.users = await Services.ApiService.getAllUsers();
    // console.dir(connections);
  },
  computed: {
    // async users() {
    // }
    ...mapGetters(["users"])
  },
  data() {
    return {
      loading: true,
      showCreateUser: false,
  };
  }
};
</script>

