<script>

export default {
  data() {
    return {
      endpoint: process.env.NODE_ENV === 'production'
        ? '/api/contact'
        : 'http://127.0.0.1:3001/contact',

      labelStyle: "block text-lg text-primary-dark mb-2",
      inputStyle: "w-full px-5 py-2 " +
        "border border-gray-300 " +
        "text-primary-dark bg-ternary-light " +
        "rounded-md shadow-sm text-md " +
        "focus:border-primary-dark focus:ring-0",

      name: "",
      email: "",
      message: "",

      captchaSolved: false
    };
  },

  computed: {
    formReady() {
      let isNotEmpty = this.name !== '' && this.email !== ''
      let isValid = this.$refs.name.checkValidity() && this.$refs.email.checkValidity()
      return this.captchaSolved && isNotEmpty && isValid
    }
  },

  async mounted() {
    await this.$recaptcha.init()
  },

  beforeDestroy() {
    this.$recaptcha.destroy()
  },

  methods: {
    async resetCaptcha() {
      await this.$recaptcha.reset()
      this.captchaSolved = false
    },

    async onSubmit() {
      // To prevent `:invalid` CSS class to be applied on page load
      this.$refs.form.classList.add("submitted")

      console.log(this.endpoint)

      if (!this.formReady) {
        return
      }

      try {
        let formData = new FormData()
        formData.append('name', this.name)
        formData.append('email', this.email)
        formData.append('message', this.message)
        formData.append('g-recaptcha-response', await this.$recaptcha.getResponse())

        fetch(this.endpoint,
          {
            method: "post",
            mode: "cors",
            body: formData,
          })
          .then((response) => {
            if (response.ok) {
              return;
            }

            return Promise.reject(response);
          })
          .then(_ => {
            alert("Спасибо за обращение!")
            this.resetCaptcha()
          })
          .catch(error => {
            alert("Произошла ошибка, повторите отправку формы позднее")
            console.error('Error:', error);
            this.resetCaptcha()
          });


      } catch (error) {
        console.error(error)
      }
    }
  },
};
</script>

<template>
  <div
    class="
        leading-loose
        max-w-xl
        p-7
        bg-secondary-light

        rounded-xl
        shadow-xl
        text-left
      "
  >
    <p
      class="
          font-general-medium
          text-primary-dark

          text-2xl
          mb-8
        "
    >
      Свяжитесь со мной
    </p>

    <form
      class="font-general-regular space-y-7"
      ref="form"
      novalidate
    >
      <div class="">
        <label :class="labelStyle" for="name">Ваше имя*</label>

        <input
          ref="name"
          v-model="name"
          :class="inputStyle"
          type="text"
          placeholder=""
          aria-label="Name"
          required
        />
      </div>
      <div>
        <label :class="labelStyle" for="email">Электронная почта*</label>

        <input
          ref="email"
          v-model="email"
          :class="inputStyle"
          type="email"
          pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$"
          placeholder=""
          aria-label="Email"
          required
        />
      </div>

      <div>
        <label :class="labelStyle" for="message">Сообщение</label>

        <textarea
          ref="message"
          :class="inputStyle"
          v-model="message"
          cols="14"
          rows="6"
          aria-label="Message"
        ></textarea>
      </div>

      <recaptcha
        @error="captchaSolved = false"
        @expired="captchaSolved = false"
        @success="captchaSolved = true"
      />

      <div>
        <RoundButton
          @click.native.prevent="onSubmit()"
          class="px-6 inline-flex items-center"
          aria-label="Send Message"
        >
          Отправить
        </RoundButton>
      </div>
    </form>
  </div>
</template>

<style lang="css" scoped>
form.submitted input:invalid {
  @apply invalid:border-red-500;
}
</style>
