<script lang="ts">
  import EmptyList from "../components/EmptyList.svelte";
  import GoalEntry from "../components/GoalEntry.svelte";
  import ProjectEntry from "../components/ProjectEntry.svelte";
  import type { ProjectResult } from "../models/project";
  import { fpGoalStore } from "../stores/goal";
  import projectStore, { fpProjectStore } from "../stores/project";
  import taskStore, { fpTaskStore } from "../stores/tasks";

  let fakeProject: ProjectResult
  let sortedProjects: ProjectResult[]

  $: {
    if ($fpGoalStore.stale && !$fpGoalStore.loading) {
      fpGoalStore.load({
        maxTime: new Date(Date.now() + (86400000 * 3)),
        minTime: new Date(),
      });
    }
  }

  $: {
    if ($fpTaskStore.stale && !$fpTaskStore.loading) {
      fpTaskStore.load({
        active: true,
        expiring: true,
      })
    }
  }

  $: {
    if ($fpProjectStore.stale && !$fpProjectStore.loading) {
      fpProjectStore.load({
        active: true,
        expiring: true,
      });
    }
  }

  $: {
    fakeProject = {
      id: "P_fakeProject",
      active: true,
      createdTime: "1970-01-01T00:00:00Z",
      description: "",
      icon: "list",
      name: "Individual Tasks",
      tasks: $fpTaskStore.tasks.filter(t => $fpProjectStore.projects.find(p => p.id === t.id) == null)
        .sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime)),
      endTime: null,
    }

    if (fakeProject.tasks.length > 0) {
      fakeProject.endTime = fakeProject.tasks[0].endTime;
    }
  }

  $: {
    const projects = fakeProject.tasks.length > 0 ? [...$fpProjectStore.projects, fakeProject] : [...$fpProjectStore.projects];
    sortedProjects = projects.sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
  }
</script>

<div class="page">
  <div class="left">
    {#if !$fpGoalStore.loading || $fpGoalStore.goals.length > 0}
      <h1>Active Goals</h1>
    {/if}
    {#each $fpGoalStore.goals as goal (goal.id)}
      <GoalEntry goal={goal} />
    {/each}
    {#if !$fpGoalStore.loading && $fpGoalStore.goals.length === 0}
      <EmptyList icon="list" text="No goals." />
    {/if}
  </div>
  <div class="right">
    {#if !$fpProjectStore.loading || $fpProjectStore.projects.length > 0}
      <h1>Upcoming Deadlines</h1>
    {/if}
    {#each sortedProjects as project (project.id)}
      <ProjectEntry linkProject={project != fakeProject} hideInactive project={project} />
    {/each}
    {#if fakeProject.tasks.length === 0 && !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
      <EmptyList icon="check" text="All good!" />
    {/if}
  </div>
</div>

<style>
  div.page {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 1ch;
    margin: 0;
    box-sizing: border-box;
  }
  div.left, div.right {
    width: 50%;
    padding: 0 1ch;
    margin: 0;
    box-sizing: border-box;
  }

  h1 {
    font-size: 1.5em;
    font-weight: 100;
    text-align: center;
  }

  @media screen and (max-width: 900px) {
    div.page {
      display: block;
    }
    div.left, div.right {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 2em;
      max-width: 100%;
      width: 640px;
      margin: auto;
    }
  }
</style>
