<template>
  <v-dialog
    fullscreen
    hide-overlay
    v-model="isVisible"
    @keydown.esc="cancel"
    :data-cy="!!$ay.dev ? 'extensions' : false"
  >
    <v-card>
      <v-card-title>{{ $ay.t("Extensions") }}</v-card-title>
      <v-card-subtitle class="mt-1" v-bind:class="subTitleClass()"
        >{{ $ay.t("SelectedItems") }}
        {{ selectedItems.length }}</v-card-subtitle
      >
      <v-card-text>
        <v-expansion-panels focusable>
          <ExtensionTags :ayaType="ayaType" :selectedItems="selectedItems" />
        </v-expansion-panels>
      </v-card-text>
      <v-card-actions>
        <v-btn text @click="close()" color="primary">{{
          $ay.t("Close")
        }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
import ExtensionTags from "./extension-tags-control.vue";
export default {
  components: {
    ExtensionTags
  },
  data: () => ({
    isVisible: false,
    resolve: null,
    reject: null
  }),
  props: {
    ayaType: {
      type: Number,
      default: 0
    },
    selectedItems: {
      type: Array
    }
  },
  methods: {
    subTitleClass() {
      if (this.selectedItems.length < 1) {
        return "warning--text";
      }
      return "primary--text";
    },
    open() {
      this.isVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    close() {
      this.isVisible = false;
      this.resolve(null);
    }
  }
};
</script>
