<script>

    import CardSettings from "components/Cards/CardSettings.svelte";
    import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
    import CardWGFilter from "components/Cards/CardWGFilter.svelte";
    import Modal from "components/Modals/Modals.svelte"
    import CardWGControl from "components/Cards/CardWGControl.svelte";

  let showModal = false;
  let showFilter = false;
    export let filter = null;

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

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

  function toggleFilter(){
    showFilter = !showFilter;
          showModal = false;
          filter = submitFilter;
    console.log("toggle Filter...");
    console.log(filter);
  }

   function getwgResponse(param) {
            const wgResponse = fetch(
                    '/api2/wgClients?filter='+param
                );

            return wgResponse;
    }


</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="text-blueGray-700 text-xl font-bold">Action</h6>
      <div class="sm:flex sm:flex-col">
        <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-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"
        >
          Apply to System
        </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 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>
            <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}"
            >
              Cancel
            </button>
          </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} />
              </div>
            </div>
        </div>
    </div>
{/if}
