<script>

    import Modal            from "components/Modals/Modals.svelte"
    import CardSettings     from "components/Cards/CardSettings.svelte";
    import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
    import CardWGFilter     from "components/Cards/CardWGFilter.svelte";
    import CardWGControl    from "components/Cards/CardWGControl.svelte";
    
    import { getCookie } from "components/Utils/CookieHandler.js";

    export let filter;

    let showModal = false;
    let showFilter = false;
    export let filter_action;
    export let checked_vals;
    let submitFilter = "";
    
    
    async function apply_sys_config() {
        let csrftoken = getCookie('csrftoken');
        let authToken = getCookie('Token');
        const rawResponse = await fetch('/api2/wgSysApply',{
                    method: 'GET',
                    credentials: 'include',
                    mode: 'same-origin',
                    headers: {
                      'X-CSRFToken': csrftoken,
                      'Authorization': "Token "+authToken,
                      'Accept': 'application/json',
                      'Content-Type': 'application/json',
                    }
                });
            console.log("Apply system config");
            console.log(rawResponse);
    }

    $: submitFilter != ""?
        apply_filter() : filter = "";
    
    function apply_filter() {
        filter = submitFilter;
        filter_action = !filter_action;
    }

    function reset_filter(){
        submitFilter = "";
    }  

    function toggleModal(){
      showModal = !showModal;
      showFilter = false;
      console.log("Modal...");
    }

    function handleOnSubmit() {
            console.log("Submitted...");
    }

    function toggleFilter(){
      showFilter = !showFilter;
      showModal = false;
      console.log("toggle Filter...");
      console.log(filter);
    }
    
    // function getCookie(name) {
    //     let cookieValue = null;
    //     if (document.cookie && document.cookie !== '') {
    //         const cookies = document.cookie.split(';');
    //         for (let i = 0; i < cookies.length; i++) {
    //             const cookie = cookies[i].trim();
    //             // Does this cookie string begin with the name we want?
    //             if (cookie.substring(0, name.length + 1) === (name + '=')) {
    //                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
    //                 break;
    //             }
    //         }
    //     }
    //     return cookieValue;
    // }
    
    async function bulk_disable_req(state) {
        
        let tmp_filter = filter
        filter = "";
        filter = tmp_filter;

        let csrftoken = getCookie('csrftoken');
        let authToken = getCookie('Token');

        console.log("Bulk Disable -->");
        console.log(csrftoken);
        console.log(authToken);
        console.log("-<>-"+checked_vals);

        const rawResponse = await fetch('/api2/wgEditState?id=bulk&state='+state, {
            method: 'POST',
            credentials: 'include',
            mode: 'same-origin',
            headers: {
              'X-CSRFToken': csrftoken,
              'Authorization': "Token "+authToken,
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(checked_vals)
        });

        // const content = await rawResponse.json();

        // login_wg();
    }

</script>

<div
  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
>
  <div class="rounded bg-white mb-0 px-6 py-6">
    <div class="text-center flex justify-between">
      <h6 class="mt-3 text-blueGray-700 text-xl font-bold">Action</h6>
      <div class="">
        <button
          class="mt-3 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="button"
          on:click="{toggleModal}"
        >
          Create Profile
        </button>
        <button
          class="mt-3 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="button"
          on:click="{toggleFilter}"
        >
          Filter
        </button>
        <button
          class="mt-3 bg-amber-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="button"
          on:click="{() => apply_sys_config()}"
        >
          Apply to System
        </button>
        <button
          class="mt-3 bg-red-600 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="button"
        >
          Backup
        </button>
      </div>
    </div>
  </div>
</div>

{#if showModal}
    <div
      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
    >
        <div class="rounded-t bg-cyan-500 mb-0 px-6 py-6">
          <div class="text-center flex justify-between">
            <h6 class="text-teal-50 text-xl font-bold">Create Account</h6>
          </div>
        </div>
        <div class="rounded-t bg-white mb-0 px-6 py-6">
            <CardCreateWGUser />
            <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="button"
              on:click="{toggleModal}"
            >
              Apply
            </button>
            <button
              class="bg-red-400 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="button"
            >
              Cancel
            </button>
        </div>
    </div>
{:else if showFilter}
    <div
      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
    >
        <div class="rounded-t bg-teal-500 mb-0 px-6 py-6">
          <div class="text-center flex justify-between">
            <h6 class="text-teal-50 text-xl font-bold">Create Filter</h6>
            <div>

                <button
                  class="bg-blueGray-700 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="button"
                  on:click="{reset_filter}"
                >
                  Reset Filter
                </button>

                <button
                  class="bg-red-400 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="button"
                  on:click="{toggleFilter}"
                >
                  Close Filter
                </button>

            </div>
          </div>
        </div>
        <div class="rounded-t bg-white mb-0 px-6 py-6">
            <div
              class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
            >
              <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
                  <CardWGFilter bind:submitFilter={submitFilter} on:submit={handleOnSubmit}></CardWGFilter >
              </div>
            </div>
        </div>
    </div>
{/if}

{#if filter_action}

<div
  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
>
  <div class="rounded bg-white mb-0 px-6 py-6">
    <div class="text-center flex justify-between">
      <h6 class="text-blueGray-700 text-xl font-bold">Filter Action</h6>
      <div class="">

        <button
          class="mt-3 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="button"
          on:click="{() => bulk_disable_req('true')}"
        >
          Enable Selected
        </button>

        <button
          class="mt-3 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="button"
          on:click="{() => bulk_disable_req('false')}"
        >
          Disable Bulk 
        </button>

        <button
          class="mt-3 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="button"
          on:click="{toggleFilter}"
        >
          Filter
        </button>
        <button
          class="mt-3 bg-red-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="button"
        >
          Backup
        </button>
      </div>
    </div>
  </div>
</div>

{/if}
