<template>
  <div v-on:mouseover="isHovered = true" v-on:mouseleave="isHovered = false">
    <v-row style="margin: 0px">
      <v-card style="width: 100%">
        <v-list-item>
          <div>
            <v-list-item-title>
              {{ value.Description }}
              <v-icon class="mk-clickable" v-show="isHovered" size="16" v-on:click="onEditDescription">mdi-pencil</v-icon>
              <v-icon class="mk-clickable-red" v-show="isHovered" size="16" v-on:click="onDelete">mdi-delete</v-icon>
            </v-list-item-title>
            <v-list-item-subtitle style="min-height: 28px">
              {{ value.Path }}
              <v-icon class="mk-clickable" v-show="isHovered" size="16" v-on:click="onEditPath">mdi-pencil</v-icon>
            </v-list-item-subtitle>

            <v-checkbox
              density="compact"
              v-model="value.checkRemovedFiles"
              color="mk-dark-grey"
              v-bind:label="$t('remove missing entries on (re-)scan')"
              style="margin-top: 0px"
              v-on:update:model-value="toggleCheckRemovedFiles"
            ></v-checkbox>
          </div>
        </v-list-item>
      </v-card>
    </v-row>
  </div>
</template>

<script>
import logger from "@helpers/logger.js";

import * as store from "@/store.js";
import i18n from "@renderer/i18n.js";
const $t = i18n.global.t;
import { eventBus } from "@renderer/eventBus.js";

export default {
  props: ["value"],
  emits: ["edit-description", "delete", "edit-path"],

  data: () => ({
    isHovered: false,
  }),

  methods: {
    onEditDescription() {
      this.$emit("edit-description", this.value);
    },

    onDelete() {
      this.$emit("delete", this.value);
    },

    onEditPath() {
      this.$emit("edit-path", this.value);
    },

    async toggleCheckRemovedFiles() {
      logger.log("[toggleCheckRemovedFiles] checkRemovedFiles:", this.value.checkRemovedFiles);
      await store.updateSourcePathCheckRemovedFiles(this.value.id_SourcePaths, this.value.checkRemovedFiles);

      if (this.value.checkRemovedFiles) {
        eventBus.showSnackbar(
          "success",
          $t("OK, during (re-)scan, any missing file in the source path will lead to removal of the entry")
        );
      } else {
        eventBus.showSnackbar(
          "success",
          $t("OK, during (re-)scan, no entry removal is performed - regardless if the file is available or not")
        );
      }
    },
  },
};
</script>

<style></style>
