<script lang="ts">
  import GenericForm from "./GenericForm.svelte";
  import type { Retailer } from "./Models.svelte.ts";

  let { showModal = $bindable(), role } = $props();

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

  let columns: string[] = ["shopname", "country", "url"];

  function closeModal() {
    showModal = false;
  }

  function submitForm(data: Retailer) {
    closeModal();
    console.log("Retailer Form Submitted:", data, role);
  }
</script>

<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={submitForm}>
        {#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>
