<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"
        >{{ $ay.t("SelectedItems") }}
        {{ selectedItems.length }}</v-card-subtitle
      >
      <!-- <v-divider></v-divider> -->
      <v-card-text>
        <v-expansion-panels focusable>
          <v-expansion-panel v-for="(item, i) in 5" :key="i">
            <v-expansion-panel-header
              >Plugin / utility name here</v-expansion-panel-header
            >
            <v-expansion-panel-content>
              Plugin utility component here, it will decide if it's visible or
              not in a way that doesn't take up dom space (v-if I guess in an
              expansion panel?) Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat.
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-card-text>
      <!-- <v-divider></v-divider> -->
      <v-card-actions>
        <v-btn text @click="close()" color="primary">{{
          $ay.t("Close")
        }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  data: () => ({
    isVisible: false,
    resolve: null,
    reject: null
  }),
  props: {
    ayaType: {
      type: Number,
      default: 0
    },
    selectedItems: {
      type: Array
    }
  },
  methods: {
    open() {
      //   //get report list from server
      //   //for now we'll fake it
      //   let fakeReportList = [];
      //   for (let i = 0; i < 25; i++) {
      //     fakeReportList.push({
      //       name: "Fake report with the number " + i,
      //       id: i
      //     });
      //   }
      //   this.reportList = fakeReportList;

      this.isVisible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    close() {
      this.isVisible = false;
      this.resolve(null);
    }
  }
};
</script>
