<script lang="ts">
  import {
    Button,
    Checkbox,
    Input,
    Label,
    Modal,
    Select,
  } from "flowbite-svelte";
  import { model } from "../../wailsjs/go/models";
  import {
    GetAuthors,
    GetAvailableBooks,
    GetClients,
    SaveAuthor,
  } from "../../wailsjs/go/main/App";
  import AuthorEditor from "./AuthorEditor.svelte";
  import { onMount } from "svelte";
  import TimeInput from "./TimeInput.svelte";

  let {
    lending = $bindable(),
    onsubmit = (_) => {},
  }: { lending: model.Lending; onsubmit: (l: model.Lending) => void } =
    $props();

  let books: model.Book[] = $state([]);
  let clients: model.Client[] = $state([]);

  function update() {
    GetAvailableBooks().then((bs) => (books = bs));
    GetClients().then((cl) => (clients = cl));
  }

  function submit(e: Event) {
    e.preventDefault();
    onsubmit(lending);
  }
  onMount(update);
</script>

<form onsubmit={submit}>
  <div class="m-5">
    <Label>Book</Label>
    <Select
      class="col-span-4"
      items={books.map((b) => {
        return { value: b.ID, name: b.Title };
      })}
      bind:value={lending.BookID}
      required
    />
  </div>
  <div class="m-5">
    <Label>Client</Label>
    <Select
      class="col-span-4"
      items={clients.map((c) => {
        return { value: c.ID, name: `${c.Email} ~ ${c.Name}` };
      })}
      bind:value={lending.ClientID}
      required
    />
  </div>
  <div class="m-5">
    <Label>Due Date</Label>
    <TimeInput bind:value={lending.DueDate} />
  </div>
  <div class="m-5">
    <Checkbox bind:checked={lending.Returned}>Returned</Checkbox>
  </div>
  <div class="m-5">
    <Button type="submit">Save</Button>
  </div>
</form>
