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

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

    <TemplateContainer>
      <div v-if="eventNotStarted && !isAlreadyRegistered">
        <RegisterLayout
          v-bind="fetchedData"
          :form-type="fetchedData.register_forms.custom_form_type"
          @onSubscribeSuccess="handleSubscription"
        >
          <component
            :is="fetchedData.register_forms.component"
            :herited-data="fetchedData"
          />
        </RegisterLayout>
      </div>

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

        <Button
          class="unsubscribe"
          :form-type="fetchedData.register_forms.custom_form_type"
          @click="unsubscribe"
        >
          {{ $_tr('unsubscribe') }}
        </Button>
      </div>

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

<script>
import moment from 'moment'

import RegisterLayout from './sub-components/RegisterLayout'
import EventBack from '../events/EventBack'
import RegisterFormsOne from './RegisterFormsOne'
import RegisterFormsTwo from './RegisterFormsTwo'
import RegisterFormsThree from './RegisterFormsThree'

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

import { Title } from 'inside-collection/atoms'
import { Button } from 'inside-collection/components'

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

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

export default {
  name: 'RegisterForms',
  $_i18nRootPath: 'customs.EVENTS.REGISTER',
  components: {
    RegisterLayout,
    TemplateContainer,
    EventBack,
    Banner,
    Title,
    Button,
    RegisterFormsOne,
    RegisterFormsTwo,
    RegisterFormsThree
  },
  mixins: [mixin],
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isAlreadyRegistered: false,
      subscription: null
    }
  },
  computed: {
    eventNotStarted() {
      const now = moment()
      const startDate = moment(this.fetchedData.date * 1000)

      return startDate.isAfter(now)
    }
  },
  beforeMount() {
    this.checkIfAlreadyRegistered()
  },
  methods: {
    formatHref,
    async checkIfAlreadyRegistered() {
      const { data } = await http.get('content/events_subscriptions', {
        fields: ['uuid'],
        filters: {
          [this.fetchedData.content_type]: { 'uuid:eq': this.fetchedData.uuid },
          authors: { 'uuid:eq': this.getUserInfos.uuid }
        }
      })

      this.subscription = data[0]
      this.isAlreadyRegistered = !!this.subscription
    },
    async unsubscribe() {
      try {
        try {
          await http.delete(
            `content/events_subscriptions/${this.subscription.uuid}`
          )
          this.$router.push(
            formatHref({
              name: this.$_page('EventPage', this.fetchedData),
              params: this.$_params(this.fetchedData)
            })
          )
        } catch (err) {
          throw new Error(err)
        }
      } catch (err) {
        throw new Error(err)
      }
    },
    handleSubscription() {
      this.isAlreadyRegistered = true

      this.$_triggerToast({
        type: 'success',
        text: this.$_tr('logs.success')
      })
    }
  }
}
</script>

<style lang="scss">
.register-forms-container {
  .unsubscribe {
    margin-top: var(--spacing-l);
  }
}
</style>
