<script lang="ts">
  import type { IconName } from "../external/icons";
  import type { GroupResult } from "../models/group";
  import type { ModalData } from "../stores/modal";
  import DaysLeft from "./DaysLeft.svelte";
  import Icon from "./Icon.svelte";
import ItemEntry from "./ItemEntry.svelte";
  import Option from "./Option.svelte";
  import OptionRow from "./OptionRow.svelte";
  import TaskEntry from "./TaskEntry.svelte";

  export let group: GroupResult = null;
  export let showAllOptions: boolean = false;

  let iconName: IconName = "question";
  let mdItemAdd: ModalData;
  let mdGroupEdit: ModalData;
  let mdGroupDelete: ModalData;

  $: iconName = group.icon as IconName;
  $: mdItemAdd = {name:"item.add", group};
  $: mdGroupEdit = {name:"group.edit", group};
  $: mdGroupDelete = {name:"group.delete", group};
</script>

<div class="group">
  <div class="icon"><Icon block name={iconName} /></div>
  <div class="body">
    <div class="header">
      <div class="name">{group.name}</div>
    </div>
    {#if showAllOptions}
      <div class="description">
        <p>{group.description}</p>
      </div>
      <OptionRow>
        <Option open={mdItemAdd}>Add Item</Option>
        <Option open={mdGroupEdit}>Edit</Option>
        <Option open={mdGroupDelete}>Delete</Option>
      </OptionRow>  
    {/if}
    <div class="list" class:full={showAllOptions}>
      {#each group.items as item (item.id)}
        <ItemEntry item={item} group={group} />
      {/each}
    </div>
  </div>
</div>

<style>
  div.group {
    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.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.description > p {
    padding: 0;
    margin: 0.25em 0;
  }
</style>
