<script lang="ts">
  import type { InspectorItem, WorkTask } from '../types';

  export let tasks: WorkTask[];
  export let onInspect: (item: InspectorItem) => void;
  export let onToggleTask: (taskID: string) => void = () => {};

  function inspectTask(task: WorkTask) {
    onInspect({ title: task.title, type: 'Task', description: task.summary, properties: [{ label: 'Status', value: task.completed ? 'Completed' : 'Open' }, { label: 'Owner', value: task.owner }, { label: 'Due', value: task.due }, { label: 'Tag', value: task.tag }] });
  }

</script>

<section class="channel-page tasks-channel">
  <header class="channel-header"><p>Work Plan</p><h1>Tasks</h1></header>
  <div class="task-list">
    {#each tasks as task}
      <article class:completed={task.completed} class="task-card">
        <input
          class="task-check"
          type="checkbox"
          aria-label={`Mark ${task.title} complete`}
          checked={task.completed}
          on:change={() => onToggleTask(task.id)}
        />
        <div>
          <h2>{task.title}</h2>
          <p>{task.summary}</p>
          <small>{task.owner} / {task.due} / #{task.tag}</small>
          <span class="task-status">{task.completed ? 'Completed' : 'Open'}</span>
        </div>
        <button aria-label={`Inspect ${task.title}`} on:click={() => inspectTask(task)}>Inspect</button>
      </article>
    {/each}
  </div>
</section>
