<template>
  <v-dialog :model-value="show" @update:model-value="$emit('update:show', $event)" persistent max-width="1000px">
    <v-card>
      <v-card-title>
        <div class="text-h5" style="width: 100%; font-size: 1.17em">
          {{ title }}
        </div>
      </v-card-title>

      <v-card-text>
        <div class="mk-light-grey">{{ question }}</div>
        <v-text-field
          v-if="enterTextValue"
          v-bind:label="textValueCaption"
          v-model="textValueLocal"
          variant="underlined"
          autofocus
        ></v-text-field>

        <v-alert v-if="alertText" v-bind:type="alertType" style="margin-top: 16px">
          {{ alertText }}
        </v-alert>
      </v-card-text>

      <v-card-text v-for="item in additionalTextBlocks || []" v-bind:key="item"> {{ item }} </v-card-text>

      <v-card-actions>
        <!-- <v-row> -->
        <div v-if="dontAskAgain">
          <v-row>
            <v-checkbox v-model="dontAskAgainValue" style="margin: 3px" hide-details></v-checkbox>
            <span style="padding: 8px 8px; cursor: pointer" v-on:click="dontAskAgainValue = !dontAskAgainValue">{{
              dontAskAgain
            }}</span>
          </v-row>
        </div>

        <v-btn
          class="xs-fullwidth"
          v-if="cancel"
          variant="tonal"
          v-bind:color="cancelColor"
          v-bind:loading="loading"
          v-on:click="onButtonClick('cancel')"
          >{{ cancel }}</v-btn
        >
        <v-btn
          class="xs-fullwidth"
          v-if="no"
          v-bind:loading="loading"
          variant="tonal"
          v-bind:color="noColor"
          v-on:click="onButtonClick('no')"
          >{{ no }}</v-btn
        >
        <v-btn
          class="xs-fullwidth"
          v-if="yes"
          v-bind:disabled="enterTextValue && !textValueEmptyAllowed && !textValueLocal"
          variant="tonal"
          v-bind:color="yesColor ? yesColor : 'primary'"
          v-bind:loading="loading"
          v-on:click="onButtonClick('yes')"
          >{{ yes }}</v-btn
        >
        <v-btn
          class="xs-fullwidth"
          v-if="ok"
          v-bind:disabled="enterTextValue && !textValueEmptyAllowed && !textValueLocal"
          variant="tonal"
          v-bind:color="okColor ? okColor : 'primary'"
          v-bind:loading="loading"
          v-on:click="onButtonClick('ok')"
          >{{ ok }}</v-btn
        >
        <!-- </v-row> -->
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
// import Vue from "vue";
// import router from "@renderer/router.js"; // workaround in order to access router.app.$t
import logger from "@helpers/logger.js";

// import { eventBus } from "@/main";

export default {
  props: [
    "show",
    "title",
    "question",
    "yes",
    "no",
    "ok",
    "cancel",
    "yesColor",
    "noColor",
    "okColor",
    "cancelColor",
    "dontAskAgain",
    "enterTextValue",
    "textValueCaption",
    "textValueEmptyAllowed",
    "loading",
    "alertText",
    "alertType",
    "additionalTextBlocks",
  ],

  emits: ["update:show"],

  data() {
    return {
      dontAskAgainValue: false,
      textValueLocal: null,
    };
  },

  methods: {
    resetData() {
      this.dontAskAgainValue = false;
      this.textValueLocal = null;
    },

    onButtonClick(eventName) {
      this.$emit(eventName, {
        dontAskAgain: this.dontAskAgainValue,
        textValue: this.textValueLocal,
      });

      this.resetData();
    },

    initTextValue(value) {
      logger.log("[initTextValue] value:", value);
      this.textValueLocal = value;
    },

    onEnterPressed() {
      if (this.enterTextValue && !this.textValueEmptyAllowed && !this.textValueLocal) {
        return;
      }

      if (this.ok) {
        this.onButtonClick("ok");
      }

      if (this.yes) {
        this.onButtonClick("yes");
      }
    },

    onEscapePressed() {
      if (this.cancel) {
        return this.onButtonClick("cancel");
      }

      if (this.no) {
        return this.onButtonClick("no");
      }
    },
  },

  // ### Lifecycle Hooks ###
  created() {},
};
</script>

<style scoped>
.btn {
  margin: 2px;
}

.input-group--text-field {
  padding-left: 16px;
  /* padding-top: 0px; */
}

@media screen and (max-width: 599px) {
  .input-group--text-field {
    padding-left: 16px;
    padding-top: 0px;
  }
}
</style>
