<template>
  <div v-if="!data && !error" class="ds-my-large">
    <form @submit.prevent="onSubmit" novalidate>
      <h1>
        {{
          invitation
            ? $t('profile.invites.title', metadata)
            : $t('components.registration.signup.title', metadata)
        }}
      </h1>
      <div class="ds-mb-large">
        <p class="ds-text">
          {{
            invitation
              ? $t('profile.invites.description')
              : $t('components.registration.signup.form.description')
          }}
        </p>
      </div>
      <ocelot-input
        :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
        type="email"
        id="email"
        model="email"
        name="email"
      />
      <os-button
        variant="primary"
        appearance="filled"
        :disabled="disabled"
        :loading="$apollo.loading"
        type="submit"
      >
        {{ $t('components.registration.signup.form.submit') }}
      </os-button>
      <slot></slot>
    </form>
  </div>
  <div v-else class="ds-my-large">
    <template v-if="!error">
      <transition name="ds-transition-fade">
        <sweetalert-icon icon="info" />
      </transition>
      <p class="ds-text ds-text-center" v-html="submitMessage" />
    </template>
    <template v-else>
      <transition name="ds-transition-fade">
        <sweetalert-icon icon="error" />
      </transition>
      <p class="ds-text ds-text-center">{{ error.message }}</p>
      <div class="ds-mb-large ds-space-centered space-top">
        <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
      </div>
    </template>
  </div>
</template>

<script>
import { OsButton } from '@ocelot-social/ui'
import gql from 'graphql-tag'
import metadata from '~/constants/metadata'
import { SweetalertIcon } from 'vue-sweetalert-icons'
import translateErrorMessage from '~/components/utils/TranslateErrorMessage'
import formValidation from '~/mixins/formValidation'
import OcelotInput from '~/components/OcelotInput/OcelotInput.vue'

export const SignupMutation = gql`
  mutation ($email: String!, $locale: String!, $inviteCode: String) {
    Signup(email: $email, locale: $locale, inviteCode: $inviteCode) {
      email
    }
  }
`
export default {
  name: 'Signup',
  mixins: [formValidation],
  components: {
    OsButton,
    SweetalertIcon,
    OcelotInput,
  },
  props: {
    invitation: { type: Boolean, default: false },
  },
  data() {
    return {
      metadata,
      formData: {
        email: '',
      },
      formSchema: {
        email: {
          type: 'email',
          required: true,
          message: this.$t('common.validations.email'),
        },
      },
      disabled: true,
      data: null,
      error: null,
    }
  },
  computed: {
    submitMessage() {
      const { email } = this.data.Signup
      return this.$t('components.registration.signup.form.success', { email })
    },
  },
  methods: {
    handleInput() {
      this.disabled = true
    },
    handleInputValid() {
      this.disabled = false
    },
    onSubmit() {
      this.formSubmit(this.handleSubmit)
    },
    async handleSubmit() {
      const { email } = this.formData

      try {
        const response = await this.$apollo.mutate({
          mutation: SignupMutation,
          variables: { email, locale: this.$i18n.locale(), inviteCode: null },
        })
        this.data = response.data
        setTimeout(() => {
          this.$emit('submit', { email: this.data.Signup.email })
        }, 3000)
      } catch (err) {
        this.$toast.error(
          translateErrorMessage(
            err.message,
            {
              'A user account with this email already exists':
                'components.registration.signup.form.errors.email-exists',
            },
            this.$t,
          ),
        )
      }
    },
  },
}
</script>
<style scoped>
.space-top {
  margin-top: 6ex;
}
</style>
