<template>
  <div class="diffs">
    <div v-for="(result, index) in details.summary" :key="index">
      <div class="pl-2 d-flex flex-row">
        <div
          @click="toggleDiff(index)"
          class="small mt-auto mb-auto text-info text-left"
        >
          <font-awesome-icon
            class="pointer"
            v-if="showDiff == index"
            icon="angle-down"
            fixed-width
          ></font-awesome-icon>
          <font-awesome-icon
            class="pointer"
            v-if="showDiff != index"
            icon="angle-right"
            fixed-width
          ></font-awesome-icon>
        </div>
        <span v-if="result.versions.length == 1" class="agmcode text-left"
          ><small
            >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small
          ></span
        >
        <span v-if="result.versions.length == 2" class="agmcode text-left"
          ><small>{{ result["fk-gauge-id"] }}</small></span
        >
        <span class="agmdetail text-left"
          ><small>{{ result["measure-date"] | dateTime }}</small></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>

<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>
 */

const NODIFF = -1;

export default {
  name: "agmdetails",
  props: ["entry", "details"],
  data() {
    return {
      showDiff: NODIFF
    };
  },
  methods: {
    toggleDiff(number) {
      if (this.showDiff !== number || this.showDiff == NODIFF) {
        this.showDiff = number;
      } else {
        this.showDiff = NODIFF;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.diffs {
  width: 615px;
  max-height: 20vh;
  overflow-y: auto;
}

.agmdetailskeys {
  width: 33%;
}

.agmdetailsvalues {
  width: 33%;
}
</style>