<template>
  <div class="flex flex-col items-center w-full md:max-w-md h-[455px] overflow-hidden">
    <div class="w-full flex flex-row items-center justify-between">
      <p>Scan-Ergebnisse</p>
      <XMarkIcon class="w-5 h-5 cursor-pointer" @click="closeModal" />
    </div>

    <br />
    <div class="w-full grow flex flex-col gap-2 overflow-y-scroll pr-2">
      <div
        v-for="i in results"
        :key="i"
        class="h-10 w-full flex justify-center items-center gap-2 py-2 px-4 text-sm font-medium rounded-md text-white bg-primary"
      >
        <p class="grow select-text">{{ i }}</p>
        <TrashIcon class="w-5 h-5 cursor-pointer" @click="() => removeElementFromResults(i)" />
      </div>
      <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useScannerStore } from "@/stores/admin/scanner";
import { TrashIcon, XMarkIcon } from "@heroicons/vue/24/outline";
import { useModalStore } from "@/stores/modal";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useScannerStore, ["results"]),
  },
  methods: {
    ...mapActions(useModalStore, ["closeModal"]),
    ...mapActions(useScannerStore, ["removeElementFromResults"]),
  },
});
</script>
