<template>
  <div class="overlay-container" v-on="listeners">
    <div class="background" :style="{ opacity: opacity }" />

    <Button
      class="button"
      type="secondary"
      size="small"
      :style="{ display }"
      @click="openModal"
    >
      {{ $_tr('button') }}
    </Button>

    <button
      v-if="getTablet && (kpi || headline) && (modalFile || modalText)"
      class="button-mobile btn-reset"
      @click="openModal"
    >
      {{ $_tr('button') }}
    </button>
  </div>
</template>

<script>
import { Button } from 'inside-collection/components'

export default {
  name: 'overlay',
  $_i18nRootPath: 'customs.HOMEPAGE',
  components: { Button },
  props: {
    title: {
      type: String
    },
    modalFile: {
      type: Object
    },
    modalText: {
      type: String
    },
    kpi: {
      type: String
    },
    headline: {
      type: String
    }
  },
  data() {
    return {
      opacity: 0,
      opacityButton: 0,
      display: 'none'
    }
  },
  computed: {
    listeners() {
      return (
        !this.getTablet && {
          mouseover: this.overlayActive,
          mouseleave: this.overlayDisable
        }
      )
    }
  },
  methods: {
    overlayActive() {
      if ((this.kpi || this.headline) && (this.modalFile || this.modalText)) {
        this.opacity = 0.5
        this.opacityButton = 1
        this.display = 'block'
      }
    },
    overlayDisable() {
      if ((this.kpi || this.headline) && (this.modalFile || this.modalText)) {
        this.opacity = 0
        this.opacityButton = 0
        this.display = 'none'
      }
    },
    openModal() {
      this.triggerModal(
        'banner-homepage',
        'static',
        {
          item: {
            title: this.title,
            file: this.modalFile,
            text: this.modalText
          },
          content: 'dashboards'
        },
        {
          layout: 'right',
          width: 712,
          transition: 'fadeInLeft',
          closeAll: true
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.overlay-container {
  .background {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--color-dark);

    @include transition(opacity 0.3s);
  }

  .button {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: none;
    transform: translate(-50%, -50%);

    @include transition(opacity 0.3s);
  }

  .button-mobile {
    position: absolute;
    right: var(--spacing-m);
    bottom: var(--spacing-m);
    color: var(--color-light);
    font-size: var(--font-size-labor);
    text-decoration: underline;
    z-index: 4;
  }
}
</style>
