<script lang="ts">
  import { debounce } from "lodash";
  import { createEventDispatcher } from "svelte";
  import { useEntity } from "../../lib/entity";
  import type { AttributeCreate, AttributeUpdate } from "../../types/base";
  import type { UpEntry } from "upend";
  const dispatch = createEventDispatcher();

  export let address: string;
  export let editable: boolean;

  $: ({ entity } = useEntity(address));

  let noteEntry: UpEntry | undefined;
  let notes: string | undefined = undefined;
  $: {
    if ($entity?.attr["NOTE"]?.length && $entity?.attr["NOTE"][0]?.value?.c) {
      noteEntry = $entity?.attr["NOTE"][0];
      notes = String(noteEntry.value.c);
    } else {
      noteEntry = undefined;
      notes = undefined;
    }
  }

  let contentEl: HTMLDivElement;

  const update = debounce(() => {
    if (noteEntry) {
      dispatch("change", {
        type: "update",
        address: noteEntry.address,
        attribute: "NOTE",
        value: { t: "String", c: contentEl.innerText },
      } as AttributeUpdate);
    } else {
      dispatch("change", {
        type: "create",
        address: address,
        attribute: "NOTE",
        value: { t: "String", c: contentEl.innerText },
      } as AttributeCreate);
    }
  }, 500);
</script>

{#if notes || editable}
  <section class="notes labelborder">
    <header>
      <h3>Notes</h3>
    </header>
    <div
      class="content"
      contenteditable={editable ? "true" : "false"}
      on:input={update}
      bind:this={contentEl}
    >
      {notes ? notes : ""}
    </div>
  </section>
{/if}

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

  .content {
    background: var(--background);
    border-radius: 4px;
    padding: 0.5em !important;
  }
</style>
