<template>
  <div class="container container--medium newsletter">
    <article class="container container--slim" id="mcsuccess">
      <div v-if="isFormSubmitted" class="success">
        <h3>
          Děkujeme za přihlášení do našeho newsletteru.
        </h3>
      </div>

      <div v-if="!isFormSubmitted">
        <h3>
          Hlavní novinky pirátů
        </h3>
        <p>
          Nechcete zmeškat žádný nový milník a zajímají vás nejčerstvější informace o tom jak Piráti pracují? Přihlašte se do <a href="https://nalodeni.pirati.cz/sledovat-piraty/" target="_blank">našeho newsletteru</a>!
        </p>
        <!---
        <form class="newsletter__form" ref="form" action="https://piratipracuji.us7.list-manage.com/subscribe/post?u=d62f338dd71a0671ba74634e9&amp;id=7f603362d6" method="post" target="_blank">
          <div class="newsletter__form-inner">
            <input type="email" name="EMAIL" v-model="form.email" placeholder="Vaše E-mailová adresa" aria-label="Vaše E-mailová adresa">
            <div style="position: absolute; left: -5000px;" aria-hidden="true">
              <input type="text" name="b_d62f338dd71a0671ba74634e9_7f603362d6" tabindex="-1" value="">
            </div>
            <Button type="submit" tag="button" link="#" @click.native="handleSubmit" :reverse="true">Odebírat</Button>
          </div>
          <label class="newsletter__form-agree">
            <input
              type="checkbox"
              v-model="form.agree"> Souhlasím se zpracováním&nbsp;<a href="https://www.pirati.cz/o-nas/ochrana-osobnich-udaju/" target="_blank">osobních údajů</a>.
          </label>
        </form>
        -->
      </div>
    </article>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: '',
        agree: false,
      },
      isFormSubmitted: false,
      emailReg: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/,
    };
  },

  mounted() {
    this.isFormSubmitted = this.$router.currentRoute.hash === '#mcsuccess';
    if (this.isFormSubmitted) {
      window.scrollTo(0, this.$el.getBoundingClientRect().top);
    }
  },

  methods: {
    isEmailValid() {
      return this.emailReg.test(this.form.email);
    },
    handleSubmit(event) {
      const form = (event.target || event.srcElement).closest('.newsletter__form');

      if (!this.isEmailValid()) {
        alert('Vyplňte prosím email ve správném formátu.');
        form.querySelector('input[type=email]').focus();
        return;
      }

      if (!this.form.agree) {
        const agreeWrapper = form.querySelector('.newsletter__form-agree');
        agreeWrapper.classList.add('do-shake');
        agreeWrapper.querySelector('input[type=checkbox]').focus();

        setTimeout(() => {
          agreeWrapper.classList.remove('do-shake');
        }, 500);

        return;
      }

      form.submit();
    },
  }
};
</script>

<style lang="scss" scoped>
.newsletter {
  background-color: $color-primary;
  color: $color-white;

  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 20px;
  padding-right: 20px;

  margin-top: 5%;
  margin-bottom: 5%;

  @media (max-width: 750px) {
    width: 100%;

    margin-top: 0;
    padding-left: 5px;
    padding-right: 5px;
  }

  .success {
    text-align: center;
  }

  h3 {
      margin-bottom: 10px;
    }

  a {
     text-decoration: underline;
     color: #ffffff;
    }
    
  &__form {
    width: 100%;
    min-height: 80px;

    background-color: $color-white;
    color: $color-black;

    margin-top: 35px;
    padding: 20px;


    &-inner {
      display: flex;
      align-items: center;
      justify-content: center;

      input {
        width: 80%;
        max-width: 300px;

        font-size: 12px;

        background: none;
        border: 0;
        outline: 0;
        border-radius: 0;
        box-shadow: none;

        border-bottom: 1px solid $color-black;

        padding-left: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-right: 23px;

        @media (max-width: 550px) {
            width: 100%;

            padding-left: 7px;
            padding-bottom: 7px;
            margin-right: 0;
            margin-bottom: 10px;
        }

        &::placeholder {
            color: $color-black;
        }
      }
    }

    &-agree {
      @include baseTransition;

      display: flex;
      font-size: 13px;
      margin-top: 10px;
      width: 65%;
      margin-left: auto;
      margin-right: auto;

      &.do-shake {
        animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
        color: #c0392b;
      }


      input {
        margin-right: 8px;
        cursor: pointer;
      }
      a {
        text-decoration: underline;
      }

      @keyframes shake {
        10%, 90% {
          transform: translate3d(-1px, 0, 0);
        }

        20%, 80% {
          transform: translate3d(2px, 0, 0);
        }

        30%, 50%, 70% {
          transform: translate3d(-4px, 0, 0);
        }

        40%, 60% {
          transform: translate3d(4px, 0, 0);
        }
      }
    }

    @media (max-width: 550px) {
        flex-direction: column;
    }
  }
}
</style>