<script>

    import { getCookie } from "components/Utils/CookieHandler.js";

    let user_ip = [];
    let user_allowed_ip = [];
    let user_ip_txt;
    let user_allowed_ip_txt;

    async function getwgIpRecs() {
        let csrftoken = getCookie('csrftoken');
        let authToken = getCookie('Token');
            const wgResponse = await fetch(
                '/api2/wgUserRecommendations', {
                    method: 'GET',
                    credentials: 'include',
                    mode: 'same-origin',
                    headers: {
                      'Authorization': "Token "+authToken,
                      'Accept': 'application/json',
                      'Content-Type': 'application/json',
                    }
                });

            return await wgResponse.json();
        }

    function validate() {
            console.log("Validate user creation here...");
        }

    function select_ip(ip) {

            if (!user_ip.includes(ip)) {

                user_ip.push(ip); 
                window.document.getElementById(ip).classList.add('bg-amber-500');

            } else {

                // user_ip.splice(ip); 
                const index = user_ip.indexOf(ip);
                if (index > -1) {
                        user_ip.splice(index, 1);
                }
                window.document.getElementById(ip).classList.remove('bg-amber-500');

            }

            user_ip_txt = user_ip.join(", ");
            
            console.log(user_ip);
            console.log(user_ip_txt);

        }

    function select_allowed_ip(ip) {

            if (!user_allowed_ip.includes(ip)) {

                user_allowed_ip.push(ip); 
                window.document.getElementById(ip).classList.add('bg-amber-500');

            } else {

                // user_allowed_ip.splice(ip); 
                const index = user_allowed_ip.indexOf(ip);
                if (index > -1) {
                        user_allowed_ip.splice(index, 1);
                }
                window.document.getElementById(ip).classList.remove('bg-amber-500');

            }

            user_allowed_ip_txt = user_allowed_ip.join(", ");
            
            console.log(user_allowed_ip);
            console.log(user_allowed_ip_txt);

        }

    let promise_IPs = getwgIpRecs();

</script>

  <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
      <form on:submit|preventDefault={validate}>
      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
        User Information
      </h6>
      <div class="flex flex-wrap">
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              Username
            </label>
            <input
              id="grid-username"
              type="text"
              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
              value="" placeholder="User Name" 
            />
          </div>
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-email"
            >
              Email address
            </label>
            <input
              id="grid-email"
              type="email"
              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
              placeholder="jesse@example.com"
            />
          </div>
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-email"
            >
              Organization
            </label>
            <input
              id="grid-email"
              type="name"
              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
              placeholder="jesse@example.com"
            />
          </div>
            {#await promise_IPs }
                    <div class="relative pt-1">
                      <div class="flex mb-2 items-center justify-between">
                          <h6> Loading </h6>
                      </div>
                      <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
                      </div>
                      </div>
            {:then IPs}
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-address"
            >
              IP Allocation
            </label>
                    <input
                      id="grid-email"
                      type="text"
                      class="border-0 px-3 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                      bind:value={user_ip_txt}
                    />
                    <div class="relative pt-1">
                        <div class="flex-wrap mt-2 mb-2 items-center">
                            {#each IPs.allocated_ips as ip_val}
                                <button 
                                    id="{ip_val}"
                                    class="border-2 border-amber-500 px-4 py-1 text-xs font-bold text-blueGray-500 rounded mr-2 active:bg-red-500 hover:bg-teal-500 hover:border-teal-500 hover:text-white"
                                    value="{ip_val}"
                                    type="button"
                                    on:click="{() => select_ip(ip_val)}"
                                    > 
                                    {ip_val} 
                                </button>
                            {/each}
                      </div>
                    </div>
          </div>
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-address"
            >
              Allowed IP
            </label>
            <input
              id="grid-address"
              type="text"
              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150 "
              bind:value={user_allowed_ip_txt}
            />
            <div class="relative pt-1">
                <div class="flex flex-wrap mt-2 mb-2 items-center">
                    {#each Object.entries(IPs.allowed_ips) as [key, ip_val]}
                        <div class="space-x-0">
                            <button
                                class="border-2 border-amber-600 bg-amber-600 px-1 py-1 text-xs font-bold text-blueGray-100 rounded-l"
                                >
                                {key}
                            </button>
                            <button 
                                id="{ip_val}"
                                class="border-2 border-amber-600 px-1 py-1 text-xs font-bold text-blueGray-500 rounded-r mr-2 active:bg-red-500 hover:bg-teal-500 hover:border-teal-500 hover:text-white"
                                value="{ip_val}"
                                type="button"
                                on:click="{() => select_allowed_ip(ip_val)}"
                                > 
                                {ip_val} 
                            </button>
                        </div>
                    {/each}
                </div>
            </div>
          </div>
          {/await}
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-address"
            >
              Extra Allowed IP
            </label>
            <input
              id="grid-address"
              type="text"
              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
              value=""
            />
          </div>
      </div>

      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
        Contact Information
      </h6>


      <hr class="mt-6 border-b-1 border-blueGray-300" />

    </form>
  </div>
