<template>
  <div
    @click="$store.commit('application/showTimeSlider', !showTimeSlider)"
    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 <fadiabbud@intevation.de>
 */
import { mapState } from "vuex";
import locale2 from "locale2";
import { format } from "date-fns";

export default {
  computed: {
    ...mapState("application", ["showTimeSlider", "currentVisibleTime"]),
    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()}`;
    }
  }
};
</script>
<style lang="scss" 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>