<script lang="ts">
  import type { IconName } from "../external/icons";
  import type { LogResult } from "../models/log";
  import type { ModalData } from "../stores/modal";
  import { formatTime } from "../utils/time";
  import Icon from "./Icon.svelte";
  import Option from "./Option.svelte";
  import OptionRow from "./OptionRow.svelte";

  export let log: LogResult = null;

  let taskIconName: IconName = "question";
  let mdLogEdit: ModalData;
  let mdLogDelete: ModalData;

  $: taskIconName = log.task.icon as IconName;
  $: mdLogEdit = {name: "log.edit", log};
  $: mdLogDelete = {name: "log.delete", log};
</script>

<div class="log">
  <div class="body">
    <div class="header">
      <div class="icon">
        <Icon name={taskIconName} />
      </div>
      <div class="name">{log.task.name}</div>
      <div class="times">{formatTime(log.loggedTime)}</div>
    </div>
    <div class="description">
      <p>{log.description}</p>

      <OptionRow>
        <Option open={mdLogEdit}>Edit Log</Option>
        <Option open={mdLogDelete}>Delete Log</Option>
      </OptionRow>
    </div>
  </div>
</div>

<style>
  div.log {
    display: flex;
    flex-direction: row;
    margin: 0.25em 0;
  }
  div.icon {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    padding: 0.125em .5ch;
    padding-top: 0.2em;

    margin-right: 0.5em;
    background: #444;
    color: #CCC;
  }
  div.body {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  div.header {
    display: flex;
    flex-direction: row;
    background: #333;
  }

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

  div.description {
    padding: 0.25em 1ch;
    background: #222;
    color: #aaa;
    border-bottom-right-radius: 0.5em;
  }
  div.description p {
    padding: 0;
    margin: 0.25em 0;
  }

  div.log {
    padding: 0.25em 1ch;
  }
</style>
