<script context="module"></script>

<script>import { getHighlightedParts, getPropertyByPath, unescape } from "instantsearch.js/es/lib/utils";
import { cx } from "../utils";
export let classes;
export let attribute;
export let result;
export let highlightedTagName = "mark";
export let nonHighlightedTagName = "span";
export let separator = "";
let parts;
$: {
  const property = getPropertyByPath(result, attribute) || [];
  const properties = Array.isArray(property) ? property : [property];
  parts = properties.map((singleValue) => getHighlightedParts(unescape(singleValue.value || "")));
}
</script>

<span class={classes.root}>
  {#each parts as part, partIndex}
    {@const isLastPart = partIndex === parts.length - 1}

    {#each part as { isHighlighted, value }}
      {@const tagName = isHighlighted ? highlightedTagName : nonHighlightedTagName}

      <svelte:element
        this={tagName}
        class={cx(isHighlighted && classes.highlighted, !isHighlighted && classes.nonHighlighted)}
        >{value}</svelte:element
      >
    {/each}

    {#if !isLastPart}
      <span class={classes.separator}>
        {separator}
      </span>
    {/if}
  {/each}
</span>
