<script lang="ts">
  import UpObjectDisplay from "./display/UpObject.svelte";
  import Selector from "./utils/Selector.svelte";
  import IconButton from "./utils/IconButton.svelte";
  import type { IValue } from "upend/types";
  import api from "../lib/api";
  import { ATTR_IN } from "upend/constants";
  import { createEventDispatcher } from "svelte";
  import { i18n } from "../i18n";
  import type { UpObject } from "upend";
  import type { Readable } from "svelte/store";
  const dispatch = createEventDispatcher();

  export let entity: Readable<UpObject>;

  let adding = false;
  let groupSelector: Selector;

  $: if (adding && groupSelector) groupSelector.focus();

  $: groups = ($entity?.attr[ATTR_IN] || []).map(
    (e) => [e.value.c as string, e.address] as [string, string],
  );

  let groupToAdd: IValue | undefined;
  async function addGroup() {
    if (!groupToAdd) {
      return;
    }
    await api.putEntry([
      {
        entity: $entity.address,
        attribute: ATTR_IN,
        value: {
          t: "Address",
          c: String(groupToAdd.c),
        },
      },
    ]);
    dispatch("change");
    groupToAdd = undefined;
  }

  async function removeGroup(groupAddress: string) {
    if (confirm($i18n.t("Are you sure you want to remove this group?"))) {
      await api.deleteEntry(groupAddress);
      dispatch("change");
    }
  }
</script>

<section class="groups labelborder">
  <header><h3>{$i18n.t("Groups")}</h3></header>
  <div class="content">
    {#if adding}
      <div class="selector">
        <Selector
          bind:this={groupSelector}
          type="value"
          valueTypes={["Address"]}
          bind:value={groupToAdd}
          on:input={addGroup}
          on:focus={(ev) => {
            if (!ev.detail) adding = false;
          }}
          placeholder={$i18n.t("Choose an entity...")}
        />
      </div>
    {/if}

    <div class="body">
      <div class="group-list">
        {#each groups as [groupAddress, groupEntryAddress]}
          <div
            class="group"
            on:mouseenter={() => dispatch("highlighted", groupAddress)}
            on:mouseleave={() => dispatch("highlighted", undefined)}
          >
            <UpObjectDisplay address={groupAddress} link />
            <IconButton
              subdued
              name="x-circle"
              on:click={() => removeGroup(groupEntryAddress)}
            />
          </div>
        {:else}
          <div class="no-groups">
            {$i18n.t("Object is not in any groups.")}
          </div>
        {/each}
      </div>
      {#if !adding}
        <div class="add-button">
          <IconButton
            outline
            small
            name="folder-plus"
            on:click={() => (adding = true)}
          />
        </div>
      {/if}
    </div>
  </div>
</section>

<style lang="scss">
  @use "./util";

  .groups {
    margin: 0.25rem 0;
    .group-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 0.2rem;
      align-items: center;
    }

    .group {
      display: inline-flex;
      align-items: center;
    }

    .body {
      display: flex;
      align-items: start;

      .group-list {
        flex-grow: 1;
      }
    }

    .selector {
      width: 100%;
      margin-bottom: 0.5rem;
    }
  }

  .no-groups {
    opacity: 0.66;
  }
</style>
