<template>
  <div
    v-if="showBanner"
    class="banner-nav-container"
  >
    <div class="banner-icon">
      <i class="fa fa-gift" />
    </div>
    <div class="banner-text-content">
      <p class="main-text">
        {{ bannerTitle }}
      </p>
      <p class="sub-text">
        {{ bannerSubTitle }}
      </p>
    </div>
    <div class="banner-actions">
      <Button
        type="primary"
        size="small"
        class="cta-button"
        @click="openExternalUrl(bannerUrl)"
      >
        {{ bannerButton }}
      </Button>
      <Button
        type="text"
        size="small"
        class="close-button"
        @click="closeBanner"
      >
        <i class="fa fa-times" />
      </Button>
    </div>
  </div>
</template>

<script>
import { useStorage } from '@vueuse/core';
import { STORAGE_KEYS } from '@/constant/storage';

export default {
  name: 'BannerNav',
  data() {
    return {
      bannerTitle: '',
      bannerSubTitle: '',
      bannerButton: '',
      bannerUrl: '',
      bannerClosed: true,
    };
  },
  computed: {
    showBanner() {
      return !this.bannerClosed;
    },
  },
  methods: {
    closeBanner() {
      this.bannerClosed = true;
    },
    openExternalUrl(url) {
      window.open(url, '_blank');
    },
  },
  created() {
    const bannerPopup = this.getNotifyBanner;

    if (!(bannerPopup && bannerPopup.key && bannerPopup.show)) {
      return false;
    }

    this.bannerClosed = useStorage(STORAGE_KEYS.LOCAL_STORAGE.BANNER_NAV(bannerPopup.key), false);
    this.bannerUrl = bannerPopup.url;
    this.bannerTitle = bannerPopup.title;
    this.bannerSubTitle = bannerPopup.sub_title || '';
    this.bannerButton = bannerPopup.button || this.$t('BANNER_BUTTON_OPEN_TEXT');
  },
};
</script>

<style scoped>
.banner-nav-container {
  width: 450px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.6s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.banner-icon {
  font-size: 20px;
  color: #16a085;
  margin-right: 15px;
}

.banner-text-content {
  flex-grow: 1;
  text-align: left;
}

.main-text {
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  line-height: 1.3;
}

.sub-text {
  font-size: 11px;
  color: #7f8c8d;
  margin: 0;
}

.banner-actions {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.cta-button {
  background: linear-gradient(45deg, #1abc9c, #16a085) !important;
  border: none !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap;
}

.close-button {
  color: #7f8c8d !important;
  margin-left: 5px !important;
  min-width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
}

.close-button:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}
</style>
