<template>
  <v-dialog v-model="isVisible" @keydown.esc="cancel" data-cy="extensions">
    <v-card>
      <v-card-title>{{ $ay.t("Extensions") }}</v-card-title>
      <v-card-subtitle class="mt-1">{{ titleText() }}</v-card-subtitle>
      <v-card-text>
        <v-expansion-panels focusable>
          <ExtensionTags :dataListSelection="dataListSelection" />
          <ExtensionExport :dataListSelection="dataListSelection" />
        </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";
import ExtensionExport from "./extension-export-control.vue";
export default {
  components: {
    ExtensionTags,
    ExtensionExport
  },
  data: () => ({
    isVisible: false,
    resolve: null,
    reject: null,
    dataListSelection: {
      ObjectType: 0,
      selectedRowIds: [],
      dataListKey: null,
      listView: null
    }
  }),
  methods: {
    titleText() {
      if (this.dataListSelection.selectedRowIds.length < 1) {
        return this.$ay.t("AllItemsInList");
      }
      return `${this.$ay.t("SelectedItems")} ${
        this.dataListSelection.selectedRowIds.length
      }`;
    },
    open(dls) {
      this.dataListSelection = dls;
      this.isVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    close() {
      this.isVisible = false;
      this.resolve(null);
    }
  }
};
</script>
