<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="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"
            />
            <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 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>