<template>
  <div class="feedback-forms-container">
    <EventBack v-bind="fetchedData" />

    <Banner :static-data="{ title: $_tr('title') }" />

    <TemplateContainer>
      <FeedbackLayout v-if="canAccess" v-bind="fetchedData">
        <component
          v-bind="fetchedData"
          :is="fetchedData.feedback_forms.component"
          form-id="register"
        />
      </FeedbackLayout>

      <div v-else-if="!registered" class="error">
        <Title tag="h5">{{ $_tr('notRegistered') }}</Title>
      </div>

      <div v-else-if="!eventOver" class="error">
        <Title tag="h5">{{ $_tr('eventNotOver') }}</Title>
      </div>
    </TemplateContainer>
  </div>
</template>

<script>
import { Title } from 'inside-collection/atoms'

import FeedbackLayout from './sub-components/FeedbackLayout'
import EventBack from '../events/EventBack'
import FeedbackFormsOne from './FeedbackFormsOne'
import FeedbackFormsTwo from './FeedbackFormsTwo'

import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Banner from '@inside-commons/components/lib/Banner'

import RegisterFeedbackFormsMixin from '../../mixins/register-feedback-forms-mixin'

import { http } from '@inside-library/helpers/Http'

export default {
  name: 'FeedbackForms',
  $_i18nRootPath: 'customs.EVENTS.FEEDBACK',
  components: {
    FeedbackLayout,
    TemplateContainer,
    EventBack,
    Banner,
    Title,
    FeedbackFormsOne,
    FeedbackFormsTwo
  },
  mixins: [RegisterFeedbackFormsMixin],
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      canAccess: true,
      registered: null,
      eventOver: null
    }
  },
  beforeMount() {
    this.checkIfCanAccess()
  },
  methods: {
    async checkIfCanAccess() {
      this.eventOver = this.$_checkIfeventIsFinished(
        this.fetchedData.date * 1000,
        this.fetchedData.end_date * 1000
      )

      if (!this.eventOver) {
        this.canAccess = false
        return
      }

      const { data: participants } = await http.get(
        'content/events_subscriptions',
        {
          filters: {
            [this.fetchedData.content_type]: {
              'uuid:eq': this.fetchedData.uuid
            },
            authors: { 'uuid:eq': this.getUserInfos.uuid }
          }
        }
      )

      this.registered = !!participants[0]

      this.canAccess = this.registered && this.eventOver
    }
  }
}
</script>
