<template>
  <v-row justify="center">
    <!-- :max-width="options.width" -->
    <v-dialog
      scrollable
      max-width="600px"
      v-model="isVisible"
      @keydown.esc="cancel"
      :data-cy="!!$ay.dev ? 'reportselector' : false"
    >
      <v-card elevation="24">
        <v-card-title class="headline lighten-2" primary-title>
          <span> {{ $ay.t("Report") }} </span>
        </v-card-title>

        <v-card-text style="height: 500px;">
          <v-radio-group v-model="selectedReport" column>
            <template v-for="item in reportList">
              <v-radio
                :label="item.name"
                :value="item"
                :key="item.id"
                color="accent"
                class="mt-1"
              ></v-radio>
            </template>
          </v-radio-group>
        </v-card-text>

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

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary darken-1"
            text
            @click.native="cancel"
            :data-cy="!!$ay.dev ? 'reportselector:cancel' : false"
            >{{ $ay.t("Cancel") }}</v-btn
          >
          <v-btn
            color="primary darken-1"
            text
            @click.native="ok"
            :data-cy="!!$ay.dev ? 'reportselector:ok' : false"
            >{{ $ay.t("OK") }}</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>
<script>
export default {
  data: () => ({
    isVisible: false,
    resolve: null,
    reject: null,
    options: {
      width: 290,
      zIndex: 200
    },
    reportList: [],
    selectedReport: null
  }),
  props: {
    ayaType: {
      type: Number,
      default: 0
    }
  },
  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;
      });
    },
    ok() {
      this.isVisible = false;
      this.resolve(this.selectedReport);
    },
    cancel() {
      this.isVisible = false;
      this.resolve(null);
    }
  }
};
</script>
