<!--
<template>
  <v-dialog
    v-model="isVisible"
    :max-width="options.width"
    :style="{ zIndex: options.zIndex }"
    @keydown.esc="cancel"
  >
    <v-card>
      <v-toolbar dark :color="options.color" dense flat>
        <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
      </v-toolbar>
      <v-card-text v-show="!!message" class="pa-4">{{ message }}</v-card-text>
      <v-card-actions class="pt-0">
        <v-spacer></v-spacer>
        <v-btn color="primary darken-1" text @click.native="agree">Yes</v-btn>
        <v-btn color="grey" text @click.native="cancel">Cancel</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
-->
<template>
  <div class="text-center">
    <v-dialog
      persistent
      v-model="isVisible"
      :max-width="options.width"
      @keydown.esc="cancel"
      :data-cy="!!$ay.dev ? 'gzconfirm' : false"
    >
      <v-card elevation="24">
        <v-card-title class="headline lighten-2" primary-title>
          <span v-if="options.title"> {{ options.title }} </span>
        </v-card-title>

        <v-card-text>
          {{ options.message }}
        </v-card-text>

        <!-- <v-divider></v-divider> v-bind:class="options.type" -->

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            v-if="options.noButtonText"
            color="primary darken-1"
            text
            @click.native="cancel"
            :data-cy="!!$ay.dev ? 'gzconfirm:nobutton' : false"
            >{{ options.noButtonText }}</v-btn
          >
          <v-btn
            color="primary darken-1"
            text
            @click.native="agree"
            :data-cy="!!$ay.dev ? 'gzconfirm:yesbutton' : false"
            >{{ options.yesButtonText }}</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
/**
 * Vuetify Confirm Dialog component
 *
 * Insert component where you want to use it:
 * <confirm ref="confirm"></confirm>
 *
 * Call it:
 * this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
 * Or use await:
 * if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
 *   // yes
 * }
 * else {
 *   // cancel
 * }
 *
 * Alternatively you can place it in main App component and access it globally via this.$root.$confirm
 * <template>
 *   <v-app>
 *     ...
 *     <confirm ref="confirm"></confirm>
 *   </v-app>
 * </template>
 *
 * mounted() {
 *   this.$root.$confirm = this.$refs.confirm.open
 * }
 */
export default {
  data: () => ({
    isVisible: false,
    resolve: null,
    reject: null,
    options: {
      title: null,
      message: null,
      yesButtonText: null,
      noButtonText: null,
      type: "warning", //one of success, info, warning, and error, see v-alert docs for more info
      width: 290,
      zIndex: 200
    }
  }),
  methods: {
    open(options) {
      this.options = Object.assign(this.options, options);
      this.isVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    agree() {
      this.resolve(true);
      this.isVisible = false;
    },
    cancel() {
      this.resolve(false);
      this.isVisible = false;
    }
  }
};
</script>
