import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { GlobalStore, UserStore } from '@store'

import { Logo } from '../../components/logo'

import { Footer } from '../../components/Footer'
import { CMyPage } from '../../components/CMyPage/index'

import { tools } from '@src/store/Modules/tools'
import { func_tools, toolsext } from '@src/store/Modules/toolsext'
import MixinMetaTags from '@src/mixins/mixin-metatags'
import {
  CCardCarousel,
  CImgText,
  CTitleBanner,
  CStatus,
  CStatusReg,
  CNextZoom,
  CVerifyTelegram, CVerifyEmail, CECommerce, CShareWithUs, CEventsCalendar
} from '@components'
import MixinBase from '@src/mixins/mixin-base'
import { static_data } from '@src/db/static_data'
import { INotData } from '@src/model'

@Component({
  mixins: [MixinBase],
  components: {
    Logo,
    Footer,
    CMyPage,
    CCardCarousel,
    CTitleBanner,
    CImgText,
    CStatus,
    CStatusReg,
    CNextZoom,
    CVerifyTelegram,
    CVerifyEmail,
    CECommerce,
    CEventsCalendar,
    CShareWithUs
  }
})
export default class Home extends MixinBase {
  public deferredPrompt: any = null
  public showbuttonHS: boolean = false
  public text: string = ''
  public visibile: boolean = false
  public cardvisible: string = 'hidden'
  public displaycard: string = 'block'
  public $t: any
  // public firstClassSection: string = 'landing_background fade homep-cover-img animate-fade homep-cover-img-1'
  public firstClassSection: string = 'fade homep-cover-img animate-fade homep-cover-img-1'
  public $q
  public polling
  public slide = 'first'
  public slide_video = 'yt_1'
  public mysteps = 0
  public myaudio = 0
  public mytestimonianze = 0
  public tab = 'guida'
  public slide2 = 0
  public animare: number = 0
  public endload: boolean = false
  public indvideo: number = 0
  public arrvideo_yt = []
  public arrvideo_mp4 = []

  public arrsteps = [
    {
      label: '1',
      value: 0,
      title: {
        it: '<strong>Passo 1 - Contributore Finanziario</strong><br><br>' +
          'A) Capisco come funziona e lo condivido ad altre 2 persone che vogliono partecipare.<br>' +
          'B) Entro nella chat e dono i <strong>33€</strong> al gestore della Billettera.',
        es: '',
        enUs: ''
      },
      myicon: 'fas fa-donate',
    }
  ]

  public advise = [
    {
      title: {
        it: 'La forza di questo gioco sono le Persone e la Collaborazione.<br>Vincete la timidezza e scrivete agli amici su whatsapp, facebook, Telegram.',
        es: '',
        enUs: ''
      },
      color: 'white', icon: 'fas fa-hands-helping',
      textcolor: 'black'
    },
  ]

  constructor() {
    super()
    // console.log('Home constructor...')
    this.initprompt()
  }

  public meta() {
    return tools.metafunc(this)
  }

  get notevolerec() {
    return UserStore.state
  }

  get tools() {
    return tools
  }

  get TelegVerificato() {
    return UserStore.state.my.profile.teleg_id > 0
  }

  get visuStatus() {
    return !this.isVerificato || !this.TelegVerificato || UserStore.state.my.profile.paymenttypes.length === 0
  }

  public mounted() {

    let primo = true
    const mytime = 10000
    this.polling = setInterval(() => {

      this.firstClassSection = 'landing_background fade homep-cover-img ' + (primo ? 'homep-cover-img-2' : 'homep-cover-img-1')
      primo = !primo

      // console.log('this.firstClassSection', this.firstClassSection)

    }, mytime)

  }

  public beforeDestroy() {
    // console.log('beforeDestroy')
    clearInterval(this.polling)
  }

  public created() {
    if (!!tools.getCookie(tools.TABBED_HOME)) {
      this.tab = tools.getCookie(tools.TABBED_HOME)
    }
    this.animare = process.env.DEV ? 0 : 8000

    for (let index = 0; index <= tools.getvideonum(true); ++index) {
      this.arrvideo_yt.push(tools.getvideoyt(index))
    }
    for (let index = 0; index <= tools.getvideonum(false); ++index) {
      this.arrvideo_mp4.push(tools.getvideomp4src(index))
    }

    GlobalStore.actions.prova()

    this.endload = true
  }

  get getvideonum_youtube() {
    return tools.getvideonum(true)
  }

  get getvideonum_mp4() {
    return tools.getvideonum(false)
  }

  get heightgallvideo() {
    return tools.heightgallvideo()
  }

  get isLogged() {
    return UserStore.state.isLogged
  }

  get isSocio() {
    return UserStore.state.my.profile.socio
  }

  get isSocioResidente() {
    return UserStore.state.my.profile.socioresidente
  }

  get isConsiglio() {
    return UserStore.state.my.profile.consiglio
  }

  get static_data() {
    return static_data
  }

  public mystilecard() {
    return {
      visibility: this.cardvisible,
      display: this.displaycard
    }
  }

  get conta() {
    return GlobalStore.state.conta
  }

  public getenv(myvar) {
    return process.env[myvar]
  }

  set conta(valore) {
    GlobalStore.actions.setConta(valore)
    const my = this.$q.lang.isoName
    tools.showNotif(this.$q, String(my))
  }

  public addtoHomeScreen() {
    if (!!this.deferredPrompt) {
      this.deferredPrompt.prompt()
      // Wait for the user to respond to the prompt
      this.deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          this.showbuttonHS = false
          console.log('User accepted the A2HS prompt')
        } else {
          console.log('User dismissed the A2HS prompt')
        }
        this.deferredPrompt = null
      })
    }
  }

  public initprompt() {

    window.addEventListener('beforeinstallprompt', (event) => {
      console.log('********************************   beforeinstallprompt fired')
      event.preventDefault()

      this.deferredPrompt = event

      // Update UI to notify the user they can add to home screen
      this.showbuttonHS = true

    })

    window.addEventListener('appinstalled', (evt) => {
      // Log install to analytics
      console.log('INSTALL: Success')
    })

  }

  get isInCostruction() {
    return process.env.IN_CONSTRUCTION === '1'
  }

  public getPermission() {
    return Notification.permission
  }

  public NotServiceWorker() {
    return (!('serviceWorker' in navigator))
  }

  public PagLogin() {
    this.$router.replace('/signin')
  }

  public PagReg() {
    this.$router.replace('/signup')
  }

  public openCreatePostModal() {
    console.log('APERTO ! openCreatePostModal')

    this.conta = this.conta + 1

    this.visibile = !this.visibile

    if (this.visibile) {
      this.displaycard = 'block'
      this.cardvisible = 'visible'
    } else {
      this.displaycard = 'block'
      this.cardvisible = 'hidden'
    }

  }

  get getappname() {
    return tools.getappname(this, false)
  }

  public gettitle_advise(rec) {
    return rec.title[tools.getLocale()]
  }

  public geticonlist(rec) {
    if (rec.icon) {
      return rec.icon
    } else {
      return 'fas fa-info'
    }

  }

  public getfileimgdown(rec) {
    return rec.file[tools.getLocale()]
  }

  get isVerificato() {
    return UserStore.getters.isVerificato
  }

  get isEmailVerified() {
    return UserStore.state.my.verified_email
  }

  public openrighttoolbar() {
    GlobalStore.state.rightDrawerOpen = true
    GlobalStore.state.rightCartOpen = false
  }

  get TelegCode() {
    return UserStore.state.my.profile.teleg_checkcode
  }

  public changetab(val) {
    tools.setCookie(tools.TABBED_HOME, val)
  }

}