<template>
  <div class="ns-popup" v-if="visible">
    <div class="pu-shield" @click="puClose('background')"></div>
    <div class="pu-view">
      <header class="pu-head">
        <slot>
          <div class="pu-head-slot">
            <div class="pu-head-slot-logo" v-if="headLogo">
              <img :src="headLogo" />
            </div>
            <div class="pu-head-slot-text" v-if="greeting">
              <span v-html="greeting"></span>
            </div>
          </div>
        </slot>
        <span v-if="closable" class="pu-close-button" @click="puClose('closeButton')">
          <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g fill="none" stroke="#FFFFFF" stroke-width="1">
              <path stroke-linecap="round" d="M 0 0 L 12 12 M 0 12 L 12 0"></path>
            </g>
          </svg>
        </span>
      </header>
      <div class="pu-body">
        <div v-if="feedbackText">
          <ns-alert class="pu-alert" :type="'banner'" context="error" :visible="true" @dismiss="hideFeedback()">
            <template #body>{{ feedbackText }}</template>
            <template #foot>{{ feedbackFoot }}</template>
          </ns-alert>
        </div>
        <v-window touchless v-model="view">
          <v-window-item v-for="(slot) in contentSlots" :key="slot.name" class="pu-slot">
            <slot :name="slot.name"></slot>
          </v-window-item>
        </v-window>
      </div>
    </div>
  </div>
</template>

<script>

import * as lodash from 'lodash'

import { AccountManager, UserService } from '@nuskin/ns-account'
import { ConfigService, RunConfigService, StringService, storage } from '@nuskin/ns-util'

// import NsAlert from '@/components/common/ns-alert.vue'

export default {
  name: 'ns-popup',
  // components: {
  //   NsAlert
  // },
  props: {
    closable: {
      type: Boolean,
      default: true
    },
    greeting: {
      type: String,
      default: ''
    },
    headLogo: {
      type: String,
      default: ''
    }
  },
  computed: {
    contentSlots () {
      let rv = {}

      let count = 0;
      for (let slotName in this.$slots) {
        if (slotName.startsWith('page')) {
          rv[slotName] = {
            index: count,
            name: slotName,
            slot: this.$slots[slotName]
          }

          ++count
        }
      }

      return rv
    }
  },
  data: function () {
    return {
      feedbackText: '',
      feedbackFoot: '',
      visible: false,
      view: 0
    }
  },
  methods: {
    close () {
      this.visible = false
    },
    puClose (source) {
      if (this.closable) {
        if (!this.sendMessage('close', source)) {
          this.close()
        }
      }
    },
    getSlotIndex (name) {
      let slot = Object.values(this.contentSlots).find((item) => {
        return name === item.name
      })

      return slot.index
    },
    isEventDefined (name) {
      return !!(this.$listeners && this.$listeners[name])
    },
    open () {
      this.visible = true
    },
    reset () {
      this.hideFeedback()
      this.view = 0
    },
    sendMessage (event, source, message) {
      if (this.isEventDefined(event)) {
        this.$emit(event, source, message)
        return true
      }

      return false
    },
    hideFeedback () {
      this.feedbackText = ''
      this.feedbackFoot = ''
    },
    showFeedback (text, foot) {
      this.feedbackText = (text != null ? String(text) : '')
      this.feedbackFoot = (foot != null ? String(foot) : '')
    },
    showView (index) {
      if ((typeof index) !== 'number') {
        index = this.getSlotIndex(String(index))
      }

      this.view = index
    }
  }
}

</script>

<style lang="scss" scoped>

@use "sass:map";
@use "~@nuskin/ns-core-styles/src/scss/colors";
@use "~@nuskin/ns-core-styles/src/scss/buttons";
@use '~@nuskin/ns-core-styles/src/scss/global.mixins';

@import "../assets/css/view-size.mixins";

$color-ash: map.get(colors.$baseColors, ash);
$color-blackhole: map.get(colors.$baseColors, blackhole);
$color-white: #FFFFFF;

.ns-popup {
  display: flex;
  justify-content: center;
  z-index: 1000000;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: left;
}

.pu-shield {
  z-index: 10;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(45, 45, 45, 0.50)
}

.pu-view {
  z-index: 20;
  align-self: center;
  width: 300px;
  background-color: $color-white;
}

@include view-desktop() {
  .pu-view {
    width: 600px;
  }
}

.pu-head {
  position: relative;

  .pu-close-button {
    position: absolute;
    top: 19px;
    right: 19px;
    width: 12px;
    height: 12px;
    color: $color-white;

    svg {
      vertical-align: top;
      width: 100%;
      height: 100%;
    }
  }

  .pu-head-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    padding: 22px;
    background-image: url('/content/dam/apps/loyalty/global/stripes.svg'), linear-gradient(#C3D401 0%, #6EC764 100%);
    background-repeat: repeat;
    color: $color-white;
    text-align: initial;

    img {
      vertical-align: top;
      width: auto;
      max-width: 100%;
      height: 70px;
      padding: 0;
    }

    .pu-head-slot-logo {
      width: auto;
      height: 100%;
    }

    .pu-head-slot-text {
      @include global.title-small();

      display: none;
      margin: 0 0 0 15px;
      color: $color-white;
      font-size: 18px !important;
      font-style: italic;
      font-weight: 600;
    }
  }

  @include view-desktop() {
    .pu-head-slot {
      flex-direction: row;
      justify-content: flex-start;
      padding: 22px 56px;

      .pu-head-slot-logo {
        width: 190px;
        height: 100%;
      }

      .pu-head-slot-text {
        display: block;
      }
    }
  }
}

.pu-body {
  padding: 20px;
  background-color: $color-white;
  border: 1px solid $color-ash;
  border-radius: 0;
  color: $color-blackhole;
  font-family: ProximaNova;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.125em;
  text-align: inherit;

  .pu-slot {
    overflow: hidden;
  }
}

.pu-alert {
  margin-bottom: 16px;
}

</style>
