<template>
  <div>
    <div
      class="d-flex border-bottom"
      style="padding-left: 3px;"
      v-if="hasAdditionalInfo || isST || isSEC || isSR"
    >
      <div v-if="hasAdditionalInfo">
        <UISpinnerButton
          @click="toggleAdditionalInfo"
          :state="entry.id === showAdditional"
          :icons="['angle-right', 'angle-down']"
          class="text-info d-inline-block"
        />
        <span class="text-info"><translate>Additional Info</translate></span>
        <span class="text-info" v-if="isAGM && details.summary">
          ({{ details.summary.length }})
        </span>
        <span
          v-if="isBN && details.summary && details.summary.bottlenecks"
          class="text-info text-left"
        >
          ({{ details.summary.bottlenecks.length }})
        </span>
        <span class="text-left" v-if="isFD">
          {{ details.summary["source-organization"] }}
          (LOS: {{ details.summary.los }})
        </span>
      </div>
      <SectionDetails v-if="isSEC && isPending" :entry="entry" />
      <StretchDetails v-if="isST && isPending" :entry="entry" />
      <SoundingResultDetail :entry="entry" v-if="isSR && isPending" />
    </div>
    <div
      v-if="entry.id === showAdditional && isPending && (isFD || isAGM || isBN)"
      class="d-flex border-bottom"
    >
      <FairwayDimensionDetail :summary="details.summary" v-if="isFD" />
      <ApprovedGaugeMeasurementDetail v-if="isAGM" />
      <BottleneckDetail :entry="entry" v-if="isBN" />
    </div>
    <div class="d-flex" style="padding-left: 3px;">
      <UISpinnerButton
        @click="toggleAdditionalLogging"
        :state="entry.id === showLogs"
        :icons="['angle-right', 'angle-down']"
        classes="text-info"
      />
      <span class="text-info"><translate>Logs</translate></span>
    </div>
    <AdditionalLog v-if="entry.id === showLogs" class="d-flex flex-row" />
  </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>
 */

import { mapState } from "vuex";

export default {
  components: {
    SoundingResultDetail: () => import("./SoundingResultDetail"),
    StretchDetails: () => import("./StretchDetails"),
    SectionDetails: () => import("./SectionDetails"),
    FairwayDimensionDetail: () => import("./FairwayDimensionDetail"),
    ApprovedGaugeMeasurementDetail: () =>
      import("./ApprovedGaugeMeasurementDetail"),
    BottleneckDetail: () => import("./BottleneckDetail"),
    AdditionalLog: () => import("./AdditionalLog")
  },
  props: ["entry"],
  computed: {
    ...mapState("imports", ["showAdditional", "showLogs", "details"]),
    kind() {
      return this.entry.kind.toUpperCase();
    },
    isPending() {
      return this.entry.state == "pending";
    },
    hasAdditionalInfo() {
      return this.isPending && (this.isAGM || this.isBN);
    },
    isFD() {
      return this.kind === "FD";
    },
    isAGM() {
      return this.kind === "AGM";
    },
    isBN() {
      return this.kind === "BN" || this.kind === "UBN";
    },
    isST() {
      return this.kind === "STSH";
    },
    isSEC() {
      return this.kind === "SEC";
    },
    isSR() {
      return this.kind === "SR" || this.kind === "DSR";
    }
  },
  methods: {
    toggleAdditionalInfo() {
      if (this.entry.id === this.showAdditional) {
        this.$store.commit("imports/hideAdditionalInfo");
      } else {
        this.$store.commit("imports/showAdditionalInfoFor", this.entry.id);
      }
    },
    toggleAdditionalLogging() {
      if (this.entry.id === this.showLogs) {
        this.$store.commit("imports/hideAdditionalLogs");
      } else {
        this.$store.commit("imports/showAdditionalLogsFor", this.entry.id);
      }
    }
  },
  mounted() {
    if (this.entry.state === "pending") {
      this.$store.commit("imports/showAdditionalInfoFor", this.entry.id);
    }
    this.$store.commit("imports/showAdditionalLogsFor", this.entry.id);
  }
};
</script>