<script setup lang="ts">
import { onUnmounted, ref } from 'vue';
import rangy from 'rangy';
import 'rangy/lib/rangy-textrange';
import Mark from 'mark.js';
const markStart = ref(0);
const markLength = ref(15);
const paragraph = ref(null);
const select2 = () => {
  const instance = new Mark(paragraph.value);
  console.log(paragraph.value);
  // instance.mark("Text");
  // const sel = rangy.getSelection();
  // const range = sel.getRangeAt(0);
  //
  // console.log(range);
  // console.log(sel.anchorNode);
  // console.log(sel.focusNode);
  // console.log(rangy.dom.isAncestorOf(root.value, sel.anchorNode));
  instance.markRanges([{ start: markStart.value, length: markLength.value }]);
};
const clear = () => {
  const instance = new Mark(paragraph.value);
  instance.unmark();
};

const selectionHandler = (e) => {
  console.log(e);
  // const selection = window.getSelection();
  const selection = rangy.getSelection();
  if (selection && !selection?.isCollapsed) {
    console.log('selection changed and something is there');
    // getting selection
    console.log(selection);
    // const { anchorNode, focusNode } = selection;
    // console.log(paragraph.value.contains(anchorNode));
    // console.log(paragraph.value.contains(focusNode));
    // const anchorNode = selection?.anchorNode
    // get range
    const range = selection.getRangeAt(0);
    console.log(range);
    // console.log(range.startContainer);
    // console.log(range.startContainer.parentNode === paragraph.value);
    // get start and end of range to use
    const { startContainer, endContainer, startOffset, endOffset } = range;
    // find out what the offset is of those containers relative to the parent
    // const start = getNodeOffset(startContainer, paragraph.value);
    // const end = getNodeOffset(endContainer, paragraph.value);
    const { start, end } = range.toCharacterRange(paragraph.value);
    console.log(
      `start: ${start}, end: ${end}, highlightStart: ${start + startOffset}, highlightEnd: ${end + endOffset}`
    );
    // markStart.value = start + startOffset;
    markStart.value = start;
    // markLength.value = end + endOffset - markStart.value;
    markLength.value = end - markStart.value;
    console.log(range.toCharacterRange(paragraph.value));
  }
};

document.addEventListener('selectionchange', selectionHandler);

onUnmounted(() => {
  document.removeEventListener('selectionchange', selectionHandler);
});
</script>

<template>
  <div
    class="greetings"
    ref="root"
  >
    <pre>
      {{ markStart }} / {{ markLength }}
    </pre>
    <h3>Here's some text</h3>
    <p>
      Here is some more Text to be selected. There's even some
      <em>emphasized</em> words and even <a href="https://iterativ.ch">links</a>.
    </p>
    <p ref="paragraph">There are even <i>multiple</i> paragraphs.</p>
    <ul>
      <li>Hallo</li>
      <li>Velo</li>
    </ul>
    <button @click="select">Select</button>
    <button @click="select2">Select 2</button>
    <button @click="clear">Unmark</button>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
