<script>

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

    export let submitFilter;
    let barWidth = 0;

    const addColor = () => barWidth += 1;

    function progress_start() {
            for (let i = 0; i < 1000; i++) {
                addColor();
                console.log("Bar width -> "+barWidth);
            }
    }
    async function getwgOrgs() {
        let csrftoken = getCookie('csrftoken');
        let authToken = getCookie('Token');
            const wgResponse = await fetch(
                '/api2/wgClients?param=orgs', {
                    method: 'GET',
                    credentials: 'include',
                    mode: 'same-origin',
                    headers: {
                      'X-CSRFToken': csrftoken,
                      'Authorization': "Token "+authToken,
                      'Accept': 'application/json',
                      'Content-Type': 'application/json',
                    }
                });
            progress_start();
            return await wgResponse.json();
        }

    async function getwgEmails() {
        let csrftoken = getCookie('csrftoken');
        let authToken = getCookie('Token');
            const wgResponse = await fetch(
                '/api2/wgClients?param=email', {
                    method: 'GET',
                    credentials: 'include',
                    mode: 'same-origin',
                    headers: {
                      'X-CSRFToken': csrftoken,
                      'Authorization': "Token "+authToken,
                      'Accept': 'application/json',
                      'Content-Type': 'application/json',
                    }
                });
            progress_start();
            return await wgResponse.json();
        }

    const validate = (e) => {
            const formData = new FormData(e.target)
            console.log(formData);
            const data = {};

            for (let field of formData) {
                const [key, value] = field;
                data[key] = value;
            }

            console.log(data);
            console.log("I'm the tester function");

            submitFilter = null;

            submitFilter = data["name"]+"+"+data["org"]+"+"+data["email_domain"]+"+"+data["user_state"];
            
            console.log(submitFilter);
        }

    // let options = getwgOrgs();
    // let options = ["GCI", "META"];

    let promise_orgs = getwgOrgs();
    let promise_email = getwgEmails();

    

</script>

    <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="w-full lg:w-12/12 px-4">
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              Name Contains :
            </label>
            <input 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" id="fuckery" type="text" name="name" />
          </div>

          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              Organization
            </label>
                {#await promise_orgs}
                    <div class="relative pt-1">
                      <div class="flex mb-2 items-center justify-between">
                        <div>
                          <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
                            Load Options
                          </span>
                        </div>
                        <div class="text-right">
                          <span class="text-xs font-semibold inline-block text-orange-600">
                              bind:barwidth={barWidth}%
                          </span>
                        </div>
                      </div>
                      <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
                          <div style="width:{barWidth}%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"></div>
                      </div>
                    </div>
                {:then wgOrgs}
                    <select name="org" 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" >
                      <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
                      <option class="text-blueGray-100" value="" >No Organization</option>
                        {#each wgOrgs as value} 
                            <p> {value} </p>
                            <option value="{value.orgs}">{value.orgs}</option>
                        {/each}
                    </select>
                {/await}
          </div>

          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              Email Domain
            </label>
                {#await promise_email}
                    <div class="relative pt-1">
                      <div class="flex mb-2 items-center justify-between">
                        <div>
                          <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
                            Load Options...
                          </span>
                        </div>
                        <div class="text-right">
                          <span class="text-xs font-semibold inline-block text-orange-600">
                              {barWidth}%
                          </span>
                        </div>
                      </div>
                      <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
                          <div style="width:{barWidth}%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"></div>
                      </div>
                    </div>
                {:then wgEmail}
                    <select name="email_domain" 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" >
                      <option class="text-blueGray-100" value="" disabled selected>Select the Email Domain</option>
                      <option class="text-blueGray-100" value="" >No Email</option>
                        {#each wgEmail as value} 
                            <p> {value} </p>
                            <option value="{value.email}">{value.email}</option>
                        {/each}
                    </select>
                {/await}
          </div>
          <div class="relative w-full mb-3">
            <label
              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
              for="grid-username"
            >
              State
            </label>
            <select name="user_state" 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" >
              <option class="text-blueGray-100" value="" disabled selected>Select state</option>
              <option value="false">Disabled</option>
              <option value="true">Enabled</option>
            </select>
          </div>
            <button
              class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
              type="submit" >
              Apply
            </button>
    </form>
