<template>
  <transition name="fade">
    <div
      class="overlay d-flex justify-content-center align-items-center"
      v-if="popup"
    >
      <div class="popup">
        <UIBoxHeader
          :icon="popup.icon"
          :title="popup.title"
          :closeCallback="close"
        />
        <div
          :class="{ 'p-3': popup.padding !== false }"
          v-html="popup.content"
        ></div>
        <div
          v-if="popup.dateSelection"
          class="dateselection d-flex flex-column mx-2"
        >
          <div class="d-flex flex-column text-left">
            <small class="my-auto text-muted">
              <translate>From</translate>
            </small>
            <input type="date" v-model="from" />
          </div>
          <div class="text-left d-flex flex-column">
            <small class="my-auto text-muted">
              <translate>To</translate>
            </small>
            <input type="date" v-model="to" />
          </div>
        </div>
        <div class="popup-footer" v-if="popup.cancel || popup.confirm">
          <button
            class="btn btn-sm btn-warning"
            @click="cancel"
            v-if="popup.cancel"
          >
            <font-awesome-icon
              :icon="popup.cancel.icon"
              class="fa-fw"
              v-if="popup.cancel.icon"
            />
            <span v-if="popup.cancel.label">{{ popup.cancel.label }}</span>
            <translate v-else>Cancel</translate>
          </button>
          <span />
          <button
            class="btn btn-sm btn-info"
            @click="confirm"
            v-if="popup.confirm"
          >
            <font-awesome-icon
              :icon="popup.confirm.icon"
              class="fa-fw"
              v-if="popup.confirm.icon"
            />
            <span v-if="popup.confirm.label">{{ popup.confirm.label }}</span>
            <translate v-else>Confirm</translate>
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
.dateselection {
  width: 250px;
}

.overlay {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}
.overlay .popup {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border-radius: 0.25rem;
  max-width: 320px;
}
.overlay .popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.5rem;
  border-bottom: 1px solid #dee2e6;
  color: var(--color-info);
  margin-bottom: 0;
  padding: 0.25rem;
  font-weight: bold;
}
.overlay .popup .popup-header .popup-title {
  padding-left: 0.25rem;
}
.overlay .popup .popup-header .popup-title .popup-icon {
  margin-right: 0.25rem;
}
.overlay .popup .popup-header .popup-close {
  color: #aaa;
  padding: 3px 5px;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.overlay .popup .popup-header .popup-close:hover {
  color: #888;
  background-color: #eee;
}
.overlay .popup .popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #dee2e6;
  padding: 0.25rem;
}
</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.kottlaender@intevation.de>
 */

import { mapState } from "vuex";
import { format, subMonths } from "date-fns";

const isoFormat = date => {
  return format(date, "YYYY-MM-DD");
};

export default {
  name: "popup",
  data() {
    return {
      from: isoFormat(subMonths(new Date(), 1)),
      to: isoFormat(new Date())
    };
  },
  computed: {
    ...mapState("application", ["popup"])
  },
  methods: {
    confirm() {
      if (this.popup.confirm && this.popup.confirm.callback)
        this.popup.confirm.callback({
          from: this.from,
          to: this.to
        });
      this.close();
    },
    cancel() {
      if (this.popup.cancel && this.popup.cancel.callback)
        this.popup.cancel.callback();
      this.close();
    },
    close() {
      this.$store.commit("application/popup", null);
    }
  }
};
</script>