<script lang="ts">
  export type ProjectOption = {
    id: number;
    name: string;
  };

  export let projects: ProjectOption[] = [];
  export let activeProjectID: number | undefined = undefined;
  export let onSubmit: (input: { projectID: number; body: string }) => void = () => {};

  let projectID = activeProjectID ?? projects[0]?.id ?? 0;
  let body = '';

  $: if (activeProjectID && projectID !== activeProjectID) {
    projectID = activeProjectID;
  }

  function submit() {
    onSubmit({ projectID, body });
    body = '';
  }
</script>

<form aria-label="快速收集" class="quick-capture" on:submit|preventDefault={submit}>
  <select name="projectID" aria-label="目标项目" bind:value={projectID}>
    {#each projects as project}
      <option value={project.id}>{project.name}</option>
    {/each}
  </select>
  <textarea name="body" aria-label="收集内容" bind:value={body}></textarea>
  <button type="submit">保存</button>
</form>
