<template>
  <div class="d-flex flex-column pb-4 border-bottom">
    <h5 class="py-2 px-3 mb-2 m-0">
      <translate>Data Availability/Accuracy</translate>
    </h5>
    <div class="px-3 container-fluid">
      <div class="row">
        <div class="col-sm-6 d-flex flex-column">
          <h6 class="font-weight-bold">
            <translate>Currency of Bottleneck Surveys</translate>
          </h6>
          <div class="d-flex flex-grow-1 text-center small">
            <div class="card rounded-left">
              <div class="card-header">OK</div>
              <div
                class="card-body d-flex align-items-center justify-content-center"
              >
                <translate
                  >The latest survey is within the revisiting time of the
                  respective bottleneck.</translate
                >
              </div>
            </div>
            <div class="card border-left-0 border-right-0 rounded-0">
              <div class="card-header rounded-0">
                Warning
              </div>
              <div
                class="card-body d-flex flex-column align-items-center justify-content-center"
              >
                <div class="form-inline justify-content-center">
                  <translate>The latest survey is within</translate>
                  <input
                    type="number"
                    step="0.1"
                    min="1"
                    class="form-control form-control-sm mx-1"
                    style="width: 60px"
                    v-model="config.bn_revtime_multiplier"
                  />
                  <translate>times the revisiting time.</translate>
                </div>
              </div>
            </div>
            <div class="card rounded-right">
              <div class="card-header">Critical</div>
              <div
                class="card-body d-flex align-items-center justify-content-center"
              >
                <span
                  v-translate="{
                    multiplier: Number(
                      config.bn_revtime_multiplier
                    ).toLocaleString()
                  }"
                  >The latest survey is older than <b>%{multiplier}</b> times
                  the revisiting time.</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 d-flex flex-column">
          <h6 class="font-weight-bold">
            <translate>Availability of Gauge Measurements</translate>
          </h6>
          <div class="d-flex flex-grow-1 text-center small">
            <div class="card rounded-left">
              <div class="card-header">OK</div>
              <div
                class="card-body d-flex align-items-center justify-content-center"
              >
                <span
                  v-translate="{
                    hours: Number(config.gm_latest_hours).toLocaleString(),
                    values: Number(config.gm_min_values_14d).toLocaleString()
                  }"
                  >The latest measurement is not older than
                  <b>%{hours}</b> hours and there are at least
                  <b>%{values}</b> measurements in the last 14 days.</span
                >
              </div>
            </div>
            <div class="card border-left-0 border-right-0 rounded-0">
              <div class="card-header rounded-0">
                Warning
              </div>
              <div
                class="card-body d-flex flex-column align-items-center justify-content-center"
              >
                <div class="form-inline justify-content-center">
                  <translate>There are less than</translate>
                  <input
                    type="number"
                    step="1"
                    min="1"
                    class="form-control form-control-sm mx-1"
                    style="width: 70px"
                    v-model="config.gm_min_values_14d"
                  />
                  <translate>measurements in the last 14 days.</translate>
                </div>
              </div>
            </div>
            <div class="card rounded-right">
              <div class="card-header">Critical</div>
              <div
                class="card-body d-flex flex-column align-items-center justify-content-center"
              >
                <div class="form-inline justify-content-center">
                  <translate>The latest measurement is older than</translate>
                  <input
                    type="number"
                    step="1"
                    min="1"
                    class="form-control form-control-sm mx-1"
                    style="width: 55px"
                    v-model="config.gm_latest_hours"
                  />
                  <translate>days.</translate>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 d-flex flex-column">
          <h6 class="font-weight-bold mt-3">
            <translate>Gauge Forecast Confidence</translate>
          </h6>
          <div class="d-flex flex-grow-1 text-center small">
            <div class="card rounded-left">
              <div class="card-header">OK</div>
              <div
                class="card-body d-flex align-items-center justify-content-center"
              >
                <span
                  v-translate="{
                    gm24: Number(
                      config.gm_forecast_offset_24h
                    ).toLocaleString(),
                    gm72: Number(config.gm_forecast_offset_72h).toLocaleString()
                  }"
                  >The highest confidence value is less than
                  <b>%{gm24} cm</b>
                  within the last 24 hours and less than
                  <b>%{gm72} cm</b>
                  within last 72 hours.</span
                >
              </div>
            </div>
            <div class="card border-left-0 border-right-0 rounded-0">
              <div class="card-header rounded-0">
                Warning
              </div>
              <div
                class="card-body d-flex flex-column align-items-center justify-content-center"
              >
                <div class="form-inline justify-content-center">
                  <translate
                    >The highest confidence value within the last 72 hours is
                    greater than</translate
                  >
                  <input
                    type="number"
                    step="1"
                    min="1"
                    class="form-control form-control-sm mx-1"
                    style="width: 55px"
                    v-model="config.gm_forecast_offset_72h"
                  />
                  cm.
                </div>
              </div>
            </div>
            <div class="card rounded-right">
              <div class="card-header">Critical</div>
              <div
                class="card-body d-flex flex-column align-items-center justify-content-center"
              >
                <div class="form-inline justify-content-center">
                  <translate
                    >The highest confidence value within the last 24 hours is
                    greater than</translate
                  >
                  <input
                    type="number"
                    step="1"
                    min="1"
                    class="form-control form-control-sm mx-1"
                    style="width: 55px"
                    v-model="config.gm_forecast_offset_24h"
                  />
                  cm.
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 d-flex flex-column">
          <h6 class="font-weight-bold mt-3">
            <translate>Gauge Forecast vs. Reality</translate>
          </h6>
          <div class="d-flex flex-grow-1 text-center small">
            <div class="card rounded-left">
              <div class="card-header">OK</div>
              <div
                class="card-body d-flex align-items-center justify-content-center"
              >
                <span
                  v-translate="{
                    nsc24: Number(
                      config.gm_forecast_vs_reality_nsc_24h
                    ).toLocaleString(),
                    nsc72: Number(
                      config.gm_forecast_vs_reality_nsc_72h
                    ).toLocaleString()
                  }"
                  >The Nash-Sutcliffe coefficient is greater than
                  <b>%{nsc24}</b>
                  for last 24 hours and greater than
                  <b>%{nsc72}</b>
                  for last 72 hours.</span
                >
              </div>
            </div>
            <div class="card border-left-0 border-right-0 rounded-0">
              <div class="card-header rounded-0">
                Warning
              </div>
              <div
                class="card-body d-flex flex-column align-items-center justify-content-center"
              >
                <div class="form-inline justify-content-center">
                  <translate
                    >The Nash-Sutcliffe coefficient for last 72 hours is less
                    than</translate
                  >
                  <input
                    type="number"
                    step="0.1"
                    class="form-control form-control-sm mx-1"
                    style="width: 70px"
                    v-model="config.gm_forecast_vs_reality_nsc_72h"
                  />
                </div>
              </div>
            </div>
            <div class="card rounded-right">
              <div class="card-header">Critical</div>
              <div
                class="card-body d-flex flex-column align-items-center justify-content-center"
              >
                <div class="form-inline justify-content-center">
                  <translate
                    >The Nash-Sutcliffe coefficient for last 24 hours is less
                    than</translate
                  >
                  <input
                    type="number"
                    step="0.1"
                    class="form-control form-control-sm mx-1"
                    style="width: 70px"
                    v-model="config.gm_forecast_vs_reality_nsc_24h"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="px-3 mt-4">
      <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
        <translate>Send</translate>
      </a>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.card
  width: 33.333%
  &:nth-child(1)
    > .card-header
      border-bottom: solid 2px #28a745
  &:nth-child(2)
    > .card-header
      border-bottom: solid 2px #ffc107
  &:nth-child(3)
    > .card-header
      border-bottom: solid 2px #dc3545
.rounded-left,
.rounded-left .card-header
  border-top-right-radius: 0
  border-bottom-right-radius: 0
.rounded-right,
.rounded-right .card-header
  border-top-left-radius: 0
  border-bottom-left-radius: 0
.card-header
  padding: 0.25rem
.card-body
  padding: 0.5rem
  .form-control-sm
    height: 24px
    font-size: 12px
</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):
 * Markus Kottländer <markus@intevation.de>
 */

import { mapState } from "vuex";

export default {
  computed: {
    ...mapState("application", ["config"])
  },
  methods: {
    submit() {
      this.$store.commit("application/config", this.config);
    }
  }
};
</script>