<script>
    import { onMount } from 'svelte';
    import { getCookie } from "components/Utils/CookieHandler.js";

    let trColor;
    let footprint;
    let infTable = [];

    // onMount(async () => {
    //      const wgResponse = await axios.get('/api2/wgLogs')
    //          .then( response => {
    //              infTable = response.data
    //              });
    //         return await wgResponse.json();
    //      });

    async function getwgResponse() {
        let csrftoken = getCookie('csrftoken');
        let authToken = getCookie('Token');
        console.log(csrftoken);
        console.log(authToken);
        const wgResponse = await fetch(
                '/api2/wgLogs', {
                    method: 'GET',
                    credentials: 'include',
                    mode: 'same-origin',
                    headers: {
                      'X-CSRFToken': csrftoken,
                      'Authorization': "Token "+authToken,
                      'Accept': 'application/json',
                      'Content-Type': 'application/json',

                        }
                    }
            );
        return await wgResponse.json();
    }

    // core components
    import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
    import CardWGControl from "components/Cards/CardWGControl.svelte";

    // can be one of light or dark
    export let color = "light";

    function handleMouseOver(e) {
        trColor = "light";
    }

    function handleMouseOut(e) {
        trColor = "dark";
    }
    
    let promise = getwgResponse();

</script>

{#await promise}

    <div
      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
    >
      <div class="rounded-t mb-0 px-4 py-3 border-0">
        <div class="flex flex-wrap items-center">
          <div class="relative w-full px-4 max-w-full flex-grow flex-1">
            <h3
              class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
            >
              Fetching...
            </h3>
          </div>
        </div>
      </div>
    </div>

{:then infTable}
<div
  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
>
  <div class="rounded-t mb-0 px-4 py-3 border-0">
    <div class="flex flex-wrap items-center">
      <div class="relative w-full px-4 max-w-full flex-grow flex-1">
        <h3
          class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
        >
          Accesss Logs
        </h3>
      </div>
    </div>
  </div>
  <div class="block w-full overflow-x-auto">
    <!-- Projects table -->
    <table class="table-auto border-collapse border border-slate-500 w-full">
      <thead>
        <tr>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Name
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Mail
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Public Key
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Data In
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
          >
            Data Out
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
            >
            Status
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
            >
            Last Session Access Time
          </th>
          <th
            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
            >
            ...
          </th>
        </tr>
      </thead>
      <tbody>
        {#each infTable as infRows}
            <tr class="{infRows.wgDin < 1 ? 'bg-red-50 text-red-500 text-sm' : infRows.wgStatus == 'true' ? 'bg-teal-50 text-sm text-teal-700 ' : 'text-blueGray-500 bg-blueGray-50 text-sm'} ">
                <td
                  class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4 border-slate-700"
                >
                    { infRows.wgName }
                </td>

                <td
                  class="border-t-8 px-4 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                >
                    { infRows.wgMail }
                </td>
                <td
                  class="border-t-8 px-4 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                >
                    { infRows.wgKey }
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                >
                    { infRows.wgDin/1000000 } MBytes
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                >
                    { infRows.wgDout/1000000 } MBytes
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 font-bold   whitespace-nowrap p-4"
                >
                { infRows.wgStatus == 'true' ? 'Connected Now': infRows.wgDin < 1 ? 'Never Connected' : 'Not Connected Now' }
                </td>

                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                >
                    { infRows.wgTStamp }
                </td>
                <td
                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4 text-right"
                >
                  <TableDropdown />
                </td>
            </tr>
        {/each}
      </tbody>
    </table>
  </div>
</div>
{:catch error}
    <div class="h-screen">
        <div
          class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
        >
          <div class="rounded-t bg-red-200 mb-0 px-6 py-6">
            <div class="text-center flex justify-between">
              <h6 class="uppercase text-blueGray-500 text-xl font-bold">Error</h6>
            </div>
          </div>
          <div class="rounded-t mt-3 mb-3 px-4 py-3 border-0">
            <div class="flex flex-wrap items-center">
              <div class="relative w-full h-full px-4 max-w-full flex-grow flex-1">
                <p class="text-lg text-red-500"> {error.message} </p>
              </div>
            </div>
          </div>
        </div>
    </div>
{/await}

