<template>
  <b-card v-if="lastResultsLoaded" id="results">
    <span>{{ hitCount }} {{ hitCount === 1 ? $t("hit") : $t("hits") }}</span>

    <div style="float: right">
      <b-button v-b-toggle.collapse-1 variant="primary" class="not-mobile" @click="onToggle()">{{
          $t("details")
        }}
      </b-button>

      <template v-if="hitCount !== 0">
        <SortSelect class="ml-2"></SortSelect>

        <DisplayModeToggle class="ml-2"></DisplayModeToggle>
      </template>
    </div>

    <b-collapse id="collapse-1" class="pt-2" style="clear:both;">
      <b-card>
        <b-table :items="tableItems" small borderless bordered thead-class="hidden" class="mb-0"></b-table>

        <br/>
        <h4>
          {{$t("mimeTypes")}}
          <b-button size="sm" variant="primary" class="float-right" @click="onCopyClick"><ClipboardIcon/></b-button>
        </h4>
        <Preloader v-if="$store.state.uiDetailsMimeAgg == null"></Preloader>
        <b-table
            v-else
            sort-by="doc_count"
            :sort-desc="true"
            thead-class="hidden"
            :items="$store.state.uiDetailsMimeAgg" small bordered class="mb-0"
        ></b-table>
      </b-card>
    </b-collapse>
  </b-card>
</template>

<script lang="ts">
import Sist2Api, {EsResult} from "@/Sist2Api";
import Vue from "vue";
import {humanFileSize} from "@/util";
import DisplayModeToggle from "@/components/DisplayModeToggle.vue";
import SortSelect from "@/components/SortSelect.vue";
import Preloader from "@/components/Preloader.vue";
import Sist2Query from "@/Sist2Query";
import ClipboardIcon from "@/components/icons/ClipboardIcon.vue";

export default Vue.extend({
  name: "ResultsCard",
  components: {ClipboardIcon, Preloader, SortSelect, DisplayModeToggle},
  created() {

  },
  computed: {
    lastResultsLoaded() {
      return this.$store.state.lastQueryResults != null;
    },
    hitCount() {
      return (this.$store.state.lastQueryResults as EsResult).aggregations.total_count.value;
    },
    tableItems() {
      const items = [];


      items.push({key: this.$t("queryTime"), value: this.took()});
      items.push({key: this.$t("totalSize"), value: this.totalSize()});

      return items;
    }
  },
  methods: {
    took() {
      return (this.$store.state.lastQueryResults as EsResult).took + "ms";
    },
    totalSize() {
      return humanFileSize((this.$store.state.lastQueryResults as EsResult).aggregations.total_size.value);
    },
    onToggle() {
      const show = !document.getElementById("collapse-1").classList.contains("show");
      this.$store.commit("setUiShowDetails", show);

      if (show && this.$store.state.uiDetailsMimeAgg == null && !this.$store.state.optUpdateMimeMap) {
        // Mime aggs are not updated automatically, update now
        this.forceUpdateMimeAgg();
      }
    },
    onCopyClick() {
      let tsvString = "";
      this.$store.state.uiDetailsMimeAgg.slice().sort((a,b) => b["doc_count"] - a["doc_count"]).forEach(row => {
        tsvString += `${row["key"]}\t${row["doc_count"]}\n`;
      });

      navigator.clipboard.writeText(tsvString);

      this.$bvToast.toast(
          this.$t("toast.copiedToClipboard"),
          {
            title: null,
            noAutoHide: false,
            toaster: "b-toaster-bottom-right",
            headerClass: "hidden",
            bodyClass: "toast-body-info",
          });
    },
    forceUpdateMimeAgg() {
      const query = Sist2Query.searchQuery();
      Sist2Api.getMimeTypes(query).then(({buckets}) => {
        this.$store.commit("setUiDetailsMimeAgg", buckets);
      });
    }
  },
});

</script>

<style>
#results {
  margin-top: 1em;

  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .08) !important;
  border-radius: 0;
  border: none;
}

#results .card-body {
  padding: 0.7em 1.25em;
}

.hidden {
  display: none;
}
</style>