<template>
  <div class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md" @click="copy">
    <DocumentDuplicateIcon class="w-5 h-5" />
    <p>kopieren</p>
  </div>
  <div
    v-if="data != 'nopaste'"
    class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md"
    @click="paste"
  >
    <ClipboardDocumentIcon class="w-5 h-5" />
    <p>einfügen</p>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { ClipboardDocumentIcon, DocumentDuplicateIcon } from "@heroicons/vue/24/outline";
import { mapState } from "pinia";
import { useContextMenuStore } from "@/stores/context-menu";
</script>

<script lang="ts">
export default defineComponent({
  props: ["data"],
  data() {
    return {
      selectedText: "",
    };
  },
  computed: {
    ...mapState(useContextMenuStore, ["clickedOnEl"]),
  },
  mounted() {
    this.selectedText =
      document.getSelection()?.toString() || this.clickedOnEl.value || this.clickedOnEl.innerText || "";

    let selection = document.getSelection()?.toString();
    console.log(selection);
    if (selection == "") {
      console.log("jo");
      const range = document.createRange();
      range.selectNode(this.clickedOnEl);
      console.log(range);
      window.getSelection()?.removeAllRanges();
      window.getSelection()?.addRange(range);
    }
  },
  methods: {
    copy() {
      navigator.clipboard.writeText(this.selectedText);
    },
    paste() {
      const el = this.clickedOnEl;
      navigator.clipboard.readText().then((e) => {
        el.value = e;
      });
    },
  },
});
</script>
