<script lang="ts">
  import type { ProjectResult } from "../models/project";
  import type { ModalData } from "../stores/modal";
  import DaysLeft from "./DaysLeft.svelte";
  import Icon from "./Icon.svelte";
  import Option from "./Option.svelte";
  import OptionRow from "./OptionRow.svelte";
  import Progress from "./Progress.svelte";
  import TaskEntry from "./TaskEntry.svelte";

  export let project: ProjectResult = null;
  export let showAllOptions: boolean = false;
  export let hideInactive: boolean = false;

  let mdAddTask: ModalData;
  let mdProjectEdit: ModalData;
  let mdProjectDelete: ModalData;
  let progressAmount: number;
  let progressTarget: number;

  $: mdAddTask = {name:"task.add", project};
  $: mdProjectEdit = {name:"project.edit", project};
  $: mdProjectDelete = {name:"project.delete", project};
  $: progressAmount = project.tasks.map(t => Math.min(t.completedAmount, t.itemAmount) * t.item.groupWeight).reduce((n,m) => n+m, 0);
  $: progressTarget = Math.max(project.tasks.map(t => t.itemAmount * t.item.groupWeight).reduce((n,m) => n+m, 0), 1);
</script>

<div class="project">
  <div class="icon" class:inactive={!project.active}><Icon block name={project.icon} /></div>
  <div class="body">
    <div class="header">
      <div class="name">{project.name}</div>
      {#if (project.endTime != null)}
        <div class="times">
          <DaysLeft startTime={project.createdTime} endTime={project.endTime} />
        </div>
      {/if}
    </div>
    <Progress thin green count={progressAmount} target={progressTarget} />
    {#if showAllOptions}
      <div class="description">
        <p>{project.description}</p>
      </div>
      <OptionRow>
        <Option open={mdAddTask}>Add Task</Option>
        <Option open={mdProjectEdit}>Edit</Option>
        <Option open={mdProjectDelete}>Delete</Option>
      </OptionRow>  
    {/if}
    <div class="list" class:full={showAllOptions}>
      {#each project.tasks as task (task.id)}
        {#if !hideInactive || task.active}
          <TaskEntry showAllOptions={showAllOptions} task={task} />
        {/if}
      {/each}
    </div>
  </div>
</div>

<style>
  div.project {
    display: flex;
    flex-direction: row;
    padding-bottom: 1em;
  }
  div.icon {
    font-size: 2em;
    padding: 0 0.5ch;
    width: 2ch;
    padding-top: 0.125em;
    color: #333;
  }
  div.icon.inactive {
    color: #484;
  }
  div.body {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  div.header {
    display: flex;
    flex-direction: row;
  }

  div.name {
    font-size: 1em;
    font-weight: 100;
    margin: auto 0;
    vertical-align: middle;
  }
  div.times {
    margin-left: auto; 
    margin-right: 0.25ch;
  }

  div.description > p {
    padding: 0;
    margin: 0.25em 0;
  }

  @media screen and (max-width: 550px) {
    div.icon {
      color: #777;
    }
    div.icon.inactive {
      color: #78ff78;
    }
  }
</style>
