<template>
  <div
    :class="{
      diffs: true,
      full: !showLogs,
      split: showLogs
    }"
  >
    <div v-for="(result, index) in details.summary" :key="index">
      <div class="pl-2 d-flex">
        <div @click="toggleDiff(index)" class="my-auto text-left">
          <UISpinnerButton
            :state="showDiff === index"
            :icons="['angle-right', 'angle-down']"
            classes="text-info"
          />
        </div>
        <span v-if="result.versions.length == 1" class="agmcode text-left"
          ><div>
            {{ result["fk-gauge-id"] }} <translate>( New )</translate>
          </div></span
        >
        <span v-if="result.versions.length == 2" class="agmcode text-left"
          ><div>{{ result["fk-gauge-id"] }}</div></span
        >
        <span class="text-left"
          ><div>{{ result["measure-date"] | dateTime }}</div></span
        >
      </div>
      <div v-if="showDiff === index" class="pl-3 d-flex flex-row">
        <div class="w-100">
          <div class="d-flex flex-row pl-3 text-left">
            <div class="header border-bottom agmdetailskeys">
              <small><translate>Value</translate></small>
            </div>
            <div
              v-if="result.versions.length == 2"
              class="header border-bottom agmdetailsvalues"
            >
              <small><translate>Old</translate></small>
            </div>
            <div class="header border-bottom agmdetailsvalues">
              <small><translate>New</translate></small>
            </div>
          </div>
          <div
            class="d-flex flex-row pl-3 text-left"
            v-for="(entry, index) in Object.keys(result.versions[0])"
            :key="index"
          >
            <div
              v-if="
                result.versions.length == 1 ||
                  result.versions[0][entry] != result.versions[1][entry]
              "
              class="agmdetailskeys"
            >
              <small>{{ entry }}</small>
            </div>
            <div
              v-if="
                result.versions.length == 1 ||
                  result.versions[0][entry] != result.versions[1][entry]
              "
              class="agmdetailsvalues"
            >
              <small>{{ result.versions[0][entry] }}</small>
            </div>
            <div
              v-if="
                result.versions.length == 2 &&
                  result.versions[0][entry] != result.versions[1][entry]
              "
              class="agmdetailsvalues"
            >
              <small>{{ result.versions[1][entry] }}</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.diffs
  width: 100%
  overflow-y: auto
  > div
    border-top: dashed 1px #dee2e6
    &:first-child
      border-top: none

.agmcode
  width: 35%

.agmdetailskeys
  width: 33%

.agmdetailsvalues
  width: 33%

.split
  max-height: 35vh

.full
  max-height: 70vh
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { mapState } from "vuex";

export default {
  name: "agmdetails",
  props: ["entry"],
  data() {
    return {
      showDiff: 0 // open first item by default
    };
  },
  computed: {
    ...mapState("imports", ["showLogs", "details"])
  },
  methods: {
    toggleDiff(number) {
      if (this.showDiff !== number) {
        this.showDiff = number;
      } else {
        this.showDiff = false;
      }
    }
  }
};
</script>