<script lang="ts">
  import Table from "./lib/Table.svelte";
  import GenericForm from "./lib/GenericForm.svelte";

  type Retailer = {
    id: number;
    shopname: string;
    url: string;
    country: string;
    display: number;
  };

  let records: Retailer[] = $state([]);
  let columns: string[] = ["shopname", "country", "url"];
  let activeTab = $state("invoice");

  async function fetchData(endpoint: string) {
    const res = await fetch("http://localhost:8080/api/" + endpoint);
    records = await res.json();
  }

  $effect(() => {
    if (activeTab === "retailers") {
      fetchData("retailers/");
    }
  });

  let showModal = $state(false);

  function openModal() {
    showModal = true;
  }

  function closeModal() {
    showModal = false;
  }

  let formdata: Retailer = {
    shopname: "",
    url: "",
    id: 0,
    country: "",
    display: 0,
  };

  function submitUserForm(data: Retailer) {
    closeModal();
    console.log("User Form Submitted:", data);
  }
  function removeRowHandler(id: Number) {
    console.log("Remove Record:", id);
  }
</script>

<!-- Bootstrap Modal -->
<div
  class="modal fade {showModal ? 'show' : ''}"
  tabindex="-1"
  role="dialog"
  style="display: {showModal ? 'block' : 'none'};"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Retailer</h5>
      </div>
      <div class="modal-body">
        <GenericForm formData={formdata} onSubmit={submitUserForm}>
          {#each columns as col}
            <div class="mb-3">
              <label for={col}>{col}:</label>
              <input
                id={col}
                type="text"
                bind:value={formdata[col as keyof Retailer]}
              />
            </div>
          {/each}
        </GenericForm>
      </div>
      <div class="modal-footer justify-content-end">
        <button type="button" class="btn btn-secondary" onclick={closeModal}
          >Close</button
        >
      </div>
    </div>
  </div>
</div>

<main>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a
        class="nav-link {activeTab === 'invoice' ? 'active' : ''}"
        href="#"
        onclick={() => (activeTab = "invoice")}>Invoices</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link {activeTab === 'retailers' ? 'active' : ''}"
        href="#"
        onclick={() => (activeTab = "retailers")}>Retailers</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link {activeTab === 'news' ? 'active' : ''}"
        href="#"
        onclick={() => (activeTab = "news")}>News</a
      >
    </li>
  </ul>

  <div class="container-fluid">
    {#if activeTab === "invoice"}
      <p>Invoice list</p>
    {/if}
    {#if activeTab === "retailers"}
      <div class="row justify-content-start">
        <div class="col-2 mt-3">
          <button
            onclick={openModal}
            type="button"
            class="btn btn-outline-primary">Add retailer</button
          >
        </div>
      </div>
      <div class="row">
        <div class="col">
          <Table {columns} {records} {removeRowHandler} />
        </div>
      </div>
    {/if}
    {#if activeTab === "news"}
      <p>news</p>
    {/if}
  </div>
</main>
