<template>
  <transition name="fade">
    <div
      class="overlay d-flex justify-content-center align-items-center"
      v-if="popup"
    >
      <div class="popup">
        <h6 class="popup-header">
          <span class="popup-title">
            <font-awesome-icon :icon="popup.icon" class="popup-icon" />
            {{ popup.title }}
          </span>
          <span class="popup-close" @click="close()">
            <font-awesome-icon icon="times" />
          </span>
        </h6>
        <div class="popup-content" v-html="popup.content"></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"
            />
            {{ popup.cancel.label || $gettext("Cancel") }}
          </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"
            />
            {{ popup.confirm.label || $gettext("Confirm") }}
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<style lang="sass" scoped>
.overlay
  position: fixed
  z-index: 9
  top: 0
  right: 0
  bottom: 0
  left: 0
  background: rgba(0, 0, 0, .3)
  .popup
    display: flex
    flex-direction: column
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
    background-color: #fff
    border-radius: 0.25rem
    max-width: 320px
    .popup-header
      display: flex
      justify-content: space-between
      align-items: center
      padding-left: .5rem
      border-bottom: 1px solid #dee2e6
      color: $color-info
      margin-bottom: 0
      padding: 0.25rem
      font-weight: bold
      .popup-title
        padding-left: 0.25rem
        .popup-icon
          margin-right: 0.25rem
      .popup-close
        color: #aaa
        padding: 3px 5px
        border-radius: 0.25rem
        cursor: pointer
        transition: background-color 0.3s, color 0.3s
        &:hover
          color: #888
          background-color: #eee
    .popup-content
      padding: 1rem
    .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";

export default {
  name: "popup",
  computed: {
    ...mapState("application", ["popup"])
  },
  methods: {
    confirm() {
      if (this.popup.confirm && this.popup.confirm.callback)
        this.popup.confirm.callback();
      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>