<template>

  <section :id="'section_id_' + id" :class="getClass()" class="fullwidth section section_default"
     :style="'background-color:' + _backgroundColor + '; color:' + _color + '; background-image: url('+_backgroundImage+')'">

    <!-- Formmulario -->
    <FormularioContacto :title="_title" v-if="sectionType=='Contactos'" />

    <!--Banner OK-->
    <div class="section_default_block fullwidth" v-if="sectionType=='Banner'">
      <div class="overlay"></div>
      <div class="section_default_wrapper fullwidth">
        <div class="container">
          <div :class="_contentSide == 'left' ? 'left50 pr40' : 'fullwidth'">
            <slot name="title" />
            <slot name="content"></slot>
            <slot v-if="hasCtaSlot" name="cta"></slot>
          </div>
          <div class="right50 pl40" v-if="hasContent2Slot">
              <slot name="content2"></slot>
          </div>
        </div>
      </div>
      <div v-if="hasImageSlot && !hasContent2Slot" class="section_default_img section_default_img_right">
        <slot name="image"></slot>
      </div>
    </div>

    <!--Só Texto OK-->
    <div class="section_default_block fullwidth" v-if="sectionType=='TextOnly'">
      <div class="section_default_wrapper fullwidth">
        <div class="container">
          <div class="fullwidth">
            <slot v-if="showTitle" name="title" />
            <slot name="content"></slot>
          </div>
        </div>
      </div>
    </div>

    <!--Texto|Texto OK-->
    <div class="section_default_block fullwidth" v-if="sectionType=='TextText'">
      <div class="section_default_wrapper fullwidth">
        <div class="container">
          <slot v-if="showTitle && titleCenter" name="title" />
          <div class="left50 pr40">
            <slot v-if="showTitle && !titleCenter" name="title" />
              <slot name="content"></slot>
              <slot v-if="hasCtaSlot" name="cta"></slot>
          </div>
          <div class="right50 pl40">
              <slot name="content2"></slot>
          </div>
        </div>
      </div>
    </div>

    <!--Só Imagem OK-->
    <div class="section_default_block fullwidth" v-if="sectionType=='ImageOnly'">
      <div class="section_default_wrapper fullwidth">
          <div class="fullwidth">
            <slot name="image"></slot>
          </div>
      </div>
    </div>

    <!--Texto|Imagem OK-->
    <div class="section_default_block fullwidth" v-if="sectionType=='TextImage'">
      <div class="section_default_wrapper fullwidth">
        <div class="container">
          <div class="left50 pr40">
              <slot v-if="showTitle" name="title" />
              <slot name="content"></slot>
              <slot v-if="hasCtaSlot" name="cta"></slot>
          </div>
        </div>
      </div>
      <div class="section_default_img section_default_img_right">
        <slot name="image"></slot>
      </div>
    </div>

    <!--Imagem|Texto OK-->
    <div class="section_default_block fullwidth" v-if="sectionType=='ImageText'">
      <div class="section_default_wrapper fullwidth">
        <div class="container">
          <div class="right50 pl40">
              <slot v-if="showTitle" name="title" />
              <slot name="content"></slot>
              <slot v-if="hasCtaSlot" name="cta"></slot>
          </div>
        </div>
      </div>
      <div class="section_default_img">
        <slot name="image"></slot>
      </div>
    </div>


    <!--Titulo + Texto + Slideshow-->
    <div class="section_default_block fullwidth" v-if="sectionType=='Slideshow'">
      <div class="section_default_wrapper fullwidth">
        <div class="container">
          <div class="fullwidth">
            <slot v-if="showTitle" name="title" />
            <slot name="content"></slot>
            <!--slideshow-->
              <Slideshow :nr_visible_items="_nr_visible_items" :classe="'slideshow_id_' + id" :bulletsColor="bulletsColor" :arrowsColor="arrowsColor" :showArrows="showArrows" :showBullets="showBullets" v-if="getSliderImages().length>0" :slidesPerView="getSlidesPerView()">
                <Slideshowitem v-for="(item, index) in getSliderImages()" :key="index">
                  <Img nolazy :src="item"  height="200" />
                </Slideshowitem>
              </Slideshow>
            <slot v-if="hasCtaSlot" name="cta"></slot>
          </div>
        </div>
      </div>
    </div>

    <!--Titulo + Texto + GaleriaItems OK-->
    <div class="section_default_block fullwidth" v-if="sectionType=='GaleriaItems' && getGaleriaItems().length>0">
      <div class="section_default_wrapper fullwidth">
        <div class="container">
          <div class="fullwidth">
            <slot v-if="showTitle" name="title" />
            <slot name="content"></slot>
            <!--galeria de items-->
              <div class="galeria_items_wrapper">
                <div :class="_nr_visible_items_per_resolution > 0 ? 'galeria_item galeria_item' + _nr_visible_items_per_resolution : 'galeria_item'" v-for="(item, index) in getGaleriaItems()" :key="index" :style="item.imagem_background ? 'background-image:url('+item.imagem_background+'); height: ' + _galeriaAltura  : 'height: ' + _galeriaAltura">
                  <A v-if="item.link" :href="item.link" :target="item.nova_tab ? '_blank' : ''">
                    <div class="galeria_item_front fullwidth">
                      <div class="galeria_item_front_overlay fullwidth" :style="'background-color:rgba('+_galeriaOverlay(item)+', '+_galeriaOpacidade(item)+')'"></div>
                      <div class="galeria_item_front_ct fullwidth" v-html="itemContent(item).titulo + itemContent(item).conteudo"></div>
                    </div>
                    <div class="galeria_item_hover fullwidth">
                      <div class="galeria_item_hover_overlay fullwidth" :style="'background-color:rgba('+_galeriaOverlayHover(item)+', '+_galeriaOpacidadeHover(item)+')'"></div>
                      <div class="galeria_item_hover_ct fullwidth" v-html="hover_img_text(item)"></div>
                    </div>
                  </A>
                  <div class="fullwidth" v-else>
                    <div class="galeria_item_front fullwidth">
                      <div class="galeria_item_front_overlay fullwidth" :style="'background-color:rgba('+_galeriaOverlay(item)+', '+_galeriaOpacidade(item)+')'"></div>
                      <div class="galeria_item_front_ct fullwidth" v-html="itemContent(item).titulo + itemContent(item).conteudo"></div>
                    </div>
                    <div class="galeria_item_hover fullwidth">
                      <div class="galeria_item_hover_overlay fullwidth" :style="'background-color:rgba('+_galeriaOverlayHover(item)+', '+_galeriaOpacidadeHover(item)+')'"></div>
                      <div class="galeria_item_hover_ct fullwidth" v-html="hover_img_text(item)"></div>
                    </div>
                  </div>
                </div>
              </div>
            <slot v-if="hasCtaSlot" name="cta"></slot>
          </div>
        </div>
      </div>
    </div>


    <!--Titulo + Texto + Slideshow de Items-->
    <div class="section_default_block fullwidth" v-if="sectionType=='SlideshowItems'">
      <div class="section_default_wrapper fullwidth">
        <div class="container">
          <div class="fullwidth">
            <slot v-if="showTitle" name="title" />
            <slot name="content"></slot>
            <!--slideshow-->
              <Slideshow :nr_visible_items="_nr_visible_items" :classe="'slideshow_id_' + id" :bulletsColor="bulletsColor" :arrowsColor="arrowsColor" :showArrows="showArrows" :showBullets="showBullets" v-if="getGaleriaItems().length>0" :slidesPerView="getSlidesPerView()">
                <Slideshowitem v-for="(item, index) in getGaleriaItems()" :key="index">

                    <div class="slideshow_item_text" v-if="item.link">
                      <A :href="item.link" :target="item.nova_tab ? '_blank' : ''">
                        <div class="slideshow_item_text_title" v-html="itemContent(item).titulo"></div>
                        <div class="slideshow_item_text_ct" v-html="itemContent(item).conteudo"></div>
                      </A>
                    </div>
                    <div class="slideshow_item_text" v-else>
                      <div class="slideshow_item_text_title" v-html="itemContent(item).titulo"></div>
                      <div class="slideshow_item_text_ct" v-html="itemContent(item).conteudo"></div>
                    </div>

                </Slideshowitem>
              </Slideshow>
            <slot v-if="hasCtaSlot" name="cta"></slot>
          </div>
        </div>
      </div>
    </div>


  </section>

</template>

<script lang="ts">
import Vue from 'vue';

import { isTablet, isMobile } from 'mobile-device-detect';

export default Vue.extend({
  name: 'SectionDefault',
  props: {
    backgroundColor: {
      type: String
    },
    backgroundImage: {
      type: String
    },
    color: {
      type: String
    },
    contentRight: {
      type: String
    },
    classe: {
      type: Array
    },
    sectionType: {
      type: String
    },
    sliderImages: {
      type: Object
    },
    galeriaItems: {
      type: Object
    },
    slidesPerView: {
      type: Number
    },
    showArrows: {
      type: Boolean
    },
    showBullets: {
      type: Boolean
    },
    bulletsColor: {
      type: String
    },
    arrowsColor: {
      type: String
    },
    galeriaOverlayGeral: {
      type: Boolean
    },
    galeriaOverlay: {
      type: String
    },
    galeriaOpacidade: {
      type: String
    },
    galeriaOverlayHover: {
      type: String
    },
    galeriaOpacidadeHover: {
      type: String
    },
    galeriaAltura: {
      type: String
    },
    _activeLang: {
      type: String
    },
    title: {
      type: String
    },
    id: {
      type: String
    },
    nr_visible_items: {
      type: Object
    }
  },
  data() {
    return {
        _contentSide: ''
    }
  },
  computed: {
    _nr_visible_items():object {
        return this.nr_visible_items
    },
    _title():string {
        return this.title ? this.title : ''
    },
    _galeriaAltura():string {
        return this.galeriaAltura + "px"
    },
    _nr_visible_items_per_resolution():object {
        if(isMobile) {
          if(isTablet) {
            return this.nr_visible_items.tablet
          } else {
            return this.nr_visible_items.mobile
          }
        } else {
          return this.nr_visible_items.desktop
        }
    },
    showTitle():boolean {
        let r=true
        this.classe.forEach(function(entry:any) {
          if(entry == "titlehide") {
            r=false
          }
        })
        return r
    },
    titleCenter():boolean {
        let r=false
        this.classe.forEach(function(entry:any) {
          if(entry == "titlecenter") {
            r=true
          }
        })
        return r
    },
    titleLeft():boolean {
        let r=false
        this.classe.forEach(function(entry:any) {
          if(entry == "titleleft") {
            r=true
          }
        })
        return r
    },
    _backgroundImage():string {
        return this.backgroundImage
    },
    _backgroundColor():string {
        return this.backgroundColor
    },
    _color():string {
        return this.color
    },
    hasImageSlot ():boolean {
        return !!this.$slots['image']
    },
    hasContent2Slot():boolean {
        return !!this.$slots['content2']
    },
    hasCtaSlot():boolean {
        return !!this.$slots['cta']
    }
  },
  methods: {
    hexToRgb(hex:string):Object {
      // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
      hex = hex.replace(shorthandRegex, function(r, g, b) {
        return r + r + g + g + b + b;
      });

      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : {};
    },
    itemContent(item: any):any {
      var vm = this
      let conteudo = item.conteudo.filter(function (el:any) {
          return el.lingua == vm._activeLang
      })
      if(conteudo.length == 1) {
        return conteudo[0]
      } else {
        return {}
      }
    },
    hover_img_text( item:any ):string {
      let content:any = this.itemContent(item)
      let src = content.conteudo_hover
      if(item.imagem_background_hover)
        src = "<img src='"+item.imagem_background_hover+"' />" + src
      return src
    },
    _galeriaOpacidadeHover(item:any):any {
      return !this.galeriaOverlayGeral ? this.galeriaOpacidadeHover : item.opacidade_overlay
    },
    _galeriaOpacidade(item:any):any {
      return !this.galeriaOverlayGeral ? this.galeriaOpacidade : item.opacidade
    },
    _galeriaOverlayHover(item:any):any {
      return !this.galeriaOverlayGeral ? this.galeriaOverlayHover : item.overlay_hover
    },
    _galeriaOverlay(item:any):any {
      return !this.galeriaOverlayGeral ? this.galeriaOverlay : item.overlay
    },
    getGaleriaItems() {
      if (this.classe === undefined || this.classe === null) {
        return []
      } else {
        return this.galeriaItems
      }
    },
    getSliderImages() {
      if (this.classe === undefined || this.classe === null) {
        return []
      } else {
        return this.sliderImages
      }
    },
    getSlidesPerView() {
      if (this.slidesPerView === undefined || this.slidesPerView === null) {
        return 1
      } else {
        return this.slidesPerView
      }
    },
    getClass():string {
      let _class = 'fullwidth section section_default'

      if (this.classe === undefined || this.classe === null) {
      } else {
        this.classe.forEach(function(entry:any) {
          if(!entry.startsWith("title")) {
            _class += " " + entry
          }
        })
      }
      return _class
    }
  },
  created() {
    if (this.contentRight === undefined || this.contentRight === null) {
      if(this.hasImageSlot) {
        this._contentSide = 'left'
      } else {
        if(this.hasContent2Slot){
          this._contentSide = 'left'
        } else{
          this._contentSide = 'full'
        }
      }
    } else {
      if(this.contentRight == 'true') {
        this._contentSide = 'right'
      } else if(this.contentRight == 'false') {
        this._contentSide = 'left'
      } else if(this.contentRight == '') {
        this._contentSide = 'right'
      }
    }
  }
})
</script>