<script>
  import pluralize from "pluralize";

  import ModalFrame from "../components/ModalFrame";
  import SubGoalInput from "../components/SubGoalInput";
  import Property from "../components/Property";

  import modal from "../stores/modal";
  import stufflog from "../stores/stufflog";

  import dateStr from "../utils/dateStr";

  export let period = {};
  export let log = {};
  export let activity = {};
  export let subActivity = {};
  export let item = null;

  let activityPoints = 0;
  let itemBonus = 0;
  let roundingError = 0;
  let title = ""

  $: activityPoints = log.score.amount * log.score.activityScore;
  $: itemBonus = item ? activityPoints * (item.multiplier - 1) : 0;
  $: roundingError = (log.score.total) - (Math.floor(activityPoints) + Math.floor(itemBonus) + log.score.dailyBonus);
  $: title = `${dateStr(log.date)} - ${(activity||{name:"(Unknown)"}).name} ${(subActivity||{name:"(Unknown)"}).name}`
</script>

<ModalFrame title={title} closable on:close={() => modal.close()}>
  <form on:submit|preventDefault={() => modal.close()}>
    {#if log.description !== ""}
      <Property label="Description">
        {log.description}
      </Property>
    {/if}
    
    <Property label="Activity Points">
      {Math.floor(activityPoints + roundingError)} points
      {#if (subActivity != null)}
        <span>
          ({log.score.amount} {pluralize(subActivity.unitName, log.score.amount)})
        </span>
      {/if}
    </Property>
    {#if item != null}
      <Property label="Sub-Goal">
        {Math.floor(itemBonus)} points
        ({item.name})
      </Property>
    {/if}
    {#if log.score.dailyBonus != 0}
      <Property label="Daily Bonus">
        {log.score.dailyBonus} points
      </Property>
    {/if}
    <Property label="Total">
      {log.score.total} points
    </Property>

    <hr />

    <button type="submit">Add Goal</button>
  </form>
</ModalFrame>

<style>
</style>