<script lang="ts">
  import type { ProjectEntry } from "$lib/models/project";
  import { STATUS_NAMES } from "$lib/models/status";
  import type Status from "$lib/models/status";
  import { getProjectListContext } from "../contexts/ProjectListContext.svelte";
  import { STATUS_ORDER } from "../scope/ProjectMenu.svelte";

  const { projects } = getProjectListContext();

  export let value: number;
  export let disabled: boolean = false;

  let projectsByStatus: Record<Status, ProjectEntry[]>;

  $: projectsByStatus = $projects.reduce((p, c) => (
    {...p, [c.status]: [...p[c.status], c]}
  ), {0: [], 1: [], 2: [], 3: [], 4: [], 5: [], 6: []});
</script>

<select disabled={disabled} bind:value={value}>
  {#each STATUS_ORDER as status (status)}
    {#if projectsByStatus[status].length > 0}
      <optgroup label={STATUS_NAMES[status]}>
        {#each projectsByStatus[status] as project (project.id)}
          <option value={project.id}>{project.name}</option>
        {/each}
      </optgroup>
    {/if}
  {/each}
</select>
