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

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

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

import { tools } from '../../store/Modules/tools'
import { toolsext } from '@src/store/Modules/toolsext'
import { static_data } from '@src/db/static_data'
import { Screen } from 'quasar'

import { CImgText } from '../../components/CImgText/index'
import { CCard, CEventsCalendar, CMyAvatar, CMyPage, CMySingleEvent } from '@components'
import MixinOperator from '@src/mixins/mixin-operator'
import MixinEvents from '../../mixins/mixin-events'
import { IEvents } from '@src/model'
import MixinBase from '@src/mixins/mixin-base'
import MixinUsers from '@src/mixins/mixin-users'

import MixinMetaTags from '@src/mixins/mixin-metatags'


@Component({
  mixins: [MixinOperator, MixinBase, MixinEvents, MixinUsers],
  components: { Logo, CImgText, CCard, CMyPage, CMyAvatar, CEventsCalendar }
})
export default class Evento extends MixinMetaTags {
  public $q
  public $t
  public myevent: IEvents = null
  public mylastevtypol: IEvents[] = []
  public selected: boolean = false

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

  @Watch('$route.params.typol')
  public changetypol() {
    // this.mytypetransgroup = ''
    const datenow = tools.addDays(tools.getDateNow(), -1)
    this.mylastevtypol = CalendarStore.state.eventlist.filter((rec) => ((rec.typol === this.$route.params.typol) && (new Date(rec.dateTimeEnd) >= datenow))).slice(-5)
    console.log('[1] this.mylastevtypol', this.mylastevtypol)
    if (this.mylastevtypol.length === 0) {
      this.mylastevtypol = CalendarStore.state.eventlist.filter((rec) => (rec.typol === this.$route.params.typol)).slice(-1)
    }
    // console.log('myevent', this.myevent, 'eventid=', this.$route.params.eventid)
  }

  get nextevents() {
    if (!!this.mylastevtypol && this.mylastevtypol.length > 1) {
      return this.mylastevtypol
    } else {
      return []
    }
  }

  public isnotmyevent(ev) {
    if (!!this.$route.params.eventid)
      return ev._id !== this.$route.params.eventid
    else
      return true
  }

  @Watch('$route.params.eventid')
  public changeevent() {
    let eventid = null
    if (!!this.$route.params.eventid)
      eventid = this.$route.params.eventid
    if (!!this.$route.query.eventid)
      eventid = this.$route.query.eventid

    console.log('changeevent', eventid)

    // this.mytypetransgroup = ''
    if (!!eventid) {
      this.myevent = CalendarStore.state.eventlist.find((rec) => rec._id === eventid)
    } else {
      if (!!this.mylastevtypol)
        this.myevent = this.mylastevtypol[0]
    }
  }

  @Watch('$route.query.eventid')
  public changeeventquery() {
    // console.log('changeevent QUERY', this.$route.query.eventid)
    // this.mytypetransgroup = ''
    if (!!this.$route.query.eventid) {
      this.myevent = CalendarStore.state.eventlist.find((rec) => rec._id === this.$route.query.eventid)
    } else {
      if (!!this.mylastevtypol)
        this.myevent = this.mylastevtypol[0]
    }
  }

  public selectEvent(eventparam: IEvents) {
    this.selected = !this.selected
  }

  public getTextEvent(myevent: IEvents) {
    if (myevent.bodytext === '') {
      return myevent.details
    } else {
      return myevent.bodytext
    }
  }

  public mounted() {
    this.changetypol()
    this.changeevent()
    // console.log('myevent', this.myevent)
  }

  get static_data() {
    return static_data
  }

  get gettitle() {
    if (!!this.myevent && (!!this.myevent.title))
      return this.myevent.title
    else
      return ''
  }

}