<script setup>
import { onMounted, ref } from 'vue';

// import { GetNote, GetContent } from '@/services/Content';
const props = defineProps(['text', 'title', 'noteKey']);

const noteContent = ref(null);

const emitter = useEmitter();

function gotoNote(){
    // emitter.emit('goto-note', props.noteKey);
}

function closeNote(){
    // emitter.emit('delete-note', props.noteKey);
}


/*
onMounted(() => {
    let content = GetContent();
    let elements = noteContent.value.getElementsByTagName('a');
    for(let i = 0, len = elements.length; i < len; i++) {
        let link = elements[i].pathname.split('/').slice(1).join('');
        link = decodeURIComponent(link);
        if(content[link] !== undefined){
            elements[i].onclick = function (event) {
                event.preventDefault();
                
                GetNote(link, (result) => {
                    emitter.emit("push-note", {key: link, text: "<h1>" + result.title + "</h1>" + result.html, title: result.title});
                });
                return false;
            }
        } else {
            elements[i].classList.add("error-link");
            elements[i].onclick = function (event) {
                event.preventDefault();
                return false;
            }
        }
    }

    setTimeout(() => setupCallout(), 0);
});

function closeNote(){
    emitter.emit('delete-note', props.noteKey);
}

function gotoNote(){
    // emitter.emit('goto-note', props.noteKey);
}

function toggleCallout() {
  const outerBlock = this.parentElement;
  outerBlock.classList.toggle("is-collapsed")
  const collapsed = outerBlock.classList.contains("is-collapsed")
  const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight
  outerBlock.style.maxHeight = height + "px"

  // walk and adjust height of all parents
  let current = outerBlock
  let parent = outerBlock.parentElement
  while (parent) {
    if (!parent.classList.contains("callout")) {
      return
    }

    const collapsed = parent.classList.contains("is-collapsed")
    const height = collapsed ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight
    parent.style.maxHeight = height + "px"

    current = parent
    parent = parent.parentElement
  }
}

function setupCallout() {
  const collapsible = noteContent.value.getElementsByClassName(
    `callout is-collapsible`,
  );
  for (const div of collapsible) {
    const title = div.firstElementChild;

    if (title) {
      title.addEventListener("click", toggleCallout)

      const collapsed = div.classList.contains("is-collapsed")
      const height = collapsed ? title.scrollHeight : div.scrollHeight
      div.style.maxHeight = height + "px"
    }
  }
}
*/


</script>

<template>
<div class="note">
    <div class="note-stunt" v-on:click="gotoNote">
        <div class="close-button" v-on:click="closeNote">
            <img class="icon" src="/icons/Pixelarticons/white/close.svg" alt="My Happy SVG"/>
        </div>
        <span>{{ title }}</span>
    </div>
    <div class="note-content-container">
        <div class="note-content" ref="noteContent" v-html="text"></div>
    </div>
</div>
</template>

<style scoped>
.note-stunt {
    writing-mode: vertical-lr;
    position: sticky;
    top: 0px;
    left: 0px;
    bottom: 0px;
    padding: 10px;
    display: flex;
    user-select: none;
}

.close-button {
    height: 20px;
    width: 20px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.note {
    min-width: 700px;
    max-width: 700px;
    overflow-y: auto;

    border-color: var(--note-border-color);
    border-width: 0px;
    border-right-width: 1px;
    border-style: solid;
    display: flex;

    background-color: var(--background-color);
    position: sticky;
    top: 0px;
}

/* Contingut de cada nota */
.note-content {
    padding-bottom: 60px;
    overflow-y: auto;
}

.note-content-container {
    margin: 20px;
}
</style>

<style>
.note-content > h1 {
    text-align: center;
}

.note-content  .katex-display {
    max-width: 600px;
}
</style>