<script>
  import { _ } from "svelte-i18n";
  import Toastify from "toastify-js";
  import { UserService } from "@odit/lfk-client-js";
  const users_promise = UserService.userControllerGetAll();
  import "gridjs/dist/theme/mermaid.css";
  import { users as usersstore } from "../store.js";
  import UsersEmptyState from "./UsersEmptyState.svelte";
  $: searchvalue = "";
  $: userscache = [];
  $: advanced_search = false;
  usersstore.subscribe((val) => {
    userscache = val;
  });
  users_promise.then((data) => {
    console.log(data);
    usersstore.set(data);
  });
</script>

{#await users_promise}
  <div
    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
    role="alert">
    <p class="font-bold">users are being loaded...</p>
    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
  </div>
{:then users}
  {#if userscache.length === 0}
    <UsersEmptyState />
  {:else}
    {#if advanced_search}
      advanced search
    {:else}
      <input
        type="search"
        bind:value={searchvalue}
        placeholder={$_('datatable.search')}
        aria-label={$_('datatable.search')}
        class="gridjs-input gridjs-search-input mb-4" />
    {/if}
    <button
      on:click={() => {
        advanced_search = !advanced_search;
      }}
      type="button"
      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">
      {#if advanced_search}
        toggle simple search
      {:else}toggle advanced search{/if}
    </button>
    <div
      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
      <table class="divide-y divide-gray-200 w-full">
        <thead class="bg-gray-50">
          <tr>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Name
            </th>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Status
            </th>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Groups
            </th>
            <th scope="col" class="relative px-6 py-3">
              <span class="sr-only">Action</span>
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
          {#each users as u}
            {#if Object.values(u)
              .toString()
              .toLowerCase()
              .includes(searchvalue)}
              <tr>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    {#if u.profilePic}
                      <div class="flex-shrink-0 h-10 w-10">
                        <img
                          class="h-10 w-10 rounded-full"
                          src={u.profilePic}
                          alt="" />
                      </div>
                    {/if}
                    <div class="ml-4">
                      <div
                        class="text-sm font-medium text-gray-900 dark:text-gray-100">
                        {u.firstname}
                        {u.middlename || ''}
                        {u.lastname}
                      </div>
                      <div class="text-sm text-gray-500">
                        {u.email || u.username}
                      </div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  {#if u.enabled}
                    <span
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
                  {:else}
                    <span
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
                  {/if}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {#each u.groups as g}
                    <a
                      href="../groups/{g.id}"
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
                  {/each}
                </td>
                <td
                  class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <a
                    href="./{u.id}"
                    class="text-indigo-600 hover:text-indigo-900">Edit</a>
                  <span
                    tabindex="0"
                    href="#"
                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
                </td>
              </tr>
            {/if}
          {/each}
        </tbody>
      </table>
    </div>
  {/if}
{:catch error}
  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
    <span class="inline-block align-middle mr-8">
      <b class="capitalize">{$_('general_promise_error')}</b>
      {error}
    </span>
  </div>
{/await}
