<template>
  <!-- <v-sheet color="white" height="420px" style="overflow: auto;" elevation="4"> -->
  <v-sheet style="overflow: auto;" elevation="4">
    <slot name="dash-title">
      <v-toolbar color="grey lighten-5" flat dense>
        <template v-if="showMoreButton">
          <v-btn
            text
            icon
            color="primary"
            @click="$emit('dash-more-click', id)"
          >
            <template v-if="count > 0">
              <v-badge inline>
                <template v-slot:badge>
                  {{ count }} <span v-if="hasMoreItems">+</span>
                </template>
                <v-icon>{{ icon }}</v-icon>
              </v-badge>
            </template>
            <template v-else>
              <v-icon>{{ icon }}</v-icon>
            </template>
          </v-btn>
        </template>
        <template v-else>
          <template v-if="count > 0">
            <v-badge inline class="mr-4">
              <template v-slot:badge>
                {{ count }} <span v-if="hasMoreItems">+</span>
              </template>
              <v-icon>{{ icon }}</v-icon>
            </v-badge>
          </template>
          <template v-else>
            <v-icon class="mr-4">{{ icon }}</v-icon>
          </template>
        </template>
        <v-toolbar-title> {{ displayTitle }} </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-menu bottom left>
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon v-bind="attrs" v-on="on">
              <v-icon>$ayiEllipsisV</v-icon>
            </v-btn>
          </template>

          <v-list>
            <v-list-item
              v-if="showMoreButton"
              @click="$emit('dash-more-click', id)"
            >
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("More") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item
              v-if="showContextButton"
              @click="$emit('dash-context', id)"
            >
              <v-list-item-icon>
                <v-icon>$ayiCog</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Settings") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item v-if="hasAddUrl" :to="addUrl">
              <v-list-item-icon>
                <v-icon>$ayiPlus</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click="$emit('dash-refresh')">
              <v-list-item-icon>
                <v-icon>$ayiSync</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Refresh") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click="$emit('dash-move-start', id)">
              <v-list-item-icon>
                <v-icon>$ayiStepBackward</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("First") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click="$emit('dash-move-back', id)">
              <v-list-item-icon>
                <v-icon>$ayiBackward</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Backward") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click="$emit('dash-move-forward', id)">
              <v-list-item-icon>
                <v-icon>$ayiForward</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Forward") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click="$emit('dash-move-end', id)">
              <v-list-item-icon>
                <v-icon>$ayiStepForward</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Last") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click="$emit('dash-remove', id)">
              <v-list-item-icon>
                <v-icon>$ayiTrashAlt</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ $ay.t("Remove") }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-toolbar>
    </slot>
    <slot name="settings">
      <div></div>
    </slot>
    <div v-if="hasError" class=" d-flex align-center">
      <v-alert
        data-cy="dash-error"
        color="error"
        icon="$ayiExclamationTriangle"
        class="multi-line"
        outlined
        >{{ errorMessage }}</v-alert
      >
    </div>
    <slot v-if="!hasError" name="main"
      ><div class="ml-4 mt-1 d-flex align-center">
        <div>
          <span class="grey--text"
            >CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT</span
          >
        </div>
      </div></slot
    >
  </v-sheet>
</template>
<script>
const KPI_LIST_MAX_ITEMS_TO_RETURN = 100;
export default {
  props: {
    id: {
      type: Number,
      required: true
    },
    title: { type: String, default: null },
    showMoreButton: { type: Boolean, default: false },
    showContextButton: { type: Boolean, default: false },
    addUrl: { type: String, default: null },
    count: { type: Number, default: 0 },
    updateFrequency: { type: Number, default: 60000 },
    maxListItems: { type: Number, default: 10 },
    icon: { type: String, default: "$ayiTachometer" },
    errorMessage: { type: String, default: null },
    settings: { type: Object, default: null }
  },
  data() {
    return {
      timer: ""
    };
  },
  computed: {
    hasAddUrl: function() {
      return this.addUrl && this.addUrl != "";
    },
    displayTitle() {
      if (this.settings && this.settings.customTitle) {
        return this.settings.customTitle;
      } else {
        return this.$ay.t(this.title);
      }
    },
    hasError() {
      return this.errorMessage != null && this.errorMessage.length > 0;
    },
    hasMoreItems() {
      //case 4200
      return this.count == KPI_LIST_MAX_ITEMS_TO_RETURN;
    }
  },
  created() {
    if (this.updateFrequency > 0) {
      this.timer = setInterval(() => {
        this.refresh();
      }, this.updateFrequency + window.$gz.util.getRandomInt(60000)); //add up to 60 seconds so they don't all fire at once
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    refresh: function() {
      this.$emit("dash-refresh");
    },
    showContext: function() {
      this.$emit("dash-context");
    }
  }
};
</script>
