<template>
  <div @click="showSlider" class="toolbar-button" v-tooltip.right="label">
    <pre
      :class="[
        'menuEntry',
        {
          'text-info': this.showTimeSlider
        }
      ]"
      >{{ currentTimeSelection }}</pre
    >
  </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) 2020 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Fadi Abbud <fadi.abbud@intevation.de>
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { mapState } from "vuex";
import locale2 from "locale2";
import { format } from "date-fns";

export default {
  computed: {
    ...mapState("application", [
      "showTimeSlider",
      "currentVisibleTime",
      "storedTime"
    ]),
    label() {
      const date = this.currentVisibleTime;
      return `<b>${this.currentVisibleTime.toLocaleDateString(locale2, {
        day: "2-digit",
        month: "2-digit",
        year: "numeric"
      })} ${format(date, "HH:mm")}</b>`;
    },
    currentTimeSelection() {
      const date = this.currentVisibleTime;
      const result = date.toLocaleDateString(locale2, {
        day: "2-digit",
        month: "2-digit"
      });
      return `${format(date, "HH:mm")}\n${result}\n${date.getFullYear()}`;
    }
  },
  methods: {
    showSlider() {
      if (this.showTimeSlider) {
        this.$store.commit(
          "application/setStoredTime",
          this.currentVisibleTime
        );
        this.$store.commit("application/setSelectedTime", new Date());
        this.$store.commit("application/showTimeSlider", false);
      } else {
        this.$store.commit("application/setSelectedTime", this.storedTime);
        this.$store.commit("application/showTimeSlider", true);
      }
    }
  }
};
</script>
<style scoped>
.menuEntry {
  font-size: 9px;
  font-weight: bold;
  line-height: normal;
}

pre {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: left;
  font-family: sans-serif;
}

.toolbar-button {
  height: 2.5rem;
  width: auto;
}
</style>