<template>
  <SfModal id="contact" :visible="true" :title="modalTitle">
    <transition name="sf-fade" mode="out-in">
      <div class="modal-content">
        <h2>{{ "Kontakt" }}</h2>
        <p>
          {{
            "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
          }}
        </p>
        <form class="form" @submit.prevent="() => false">
          <div class="form__group">
            <SfInput
              v-model="firstName"
              label="Vorname"
              name="firstName"
              class="form__element col--span-3"
              required
              :valid="firstNameBlur || validFirstName(firstName)"
              error-message="Pflichtfeld"
              @blur="firstNameBlur = false"
            />
            <SfInput
              v-model="lastName"
              label="Name"
              name="lastName"
              class="form__element col--span-3"
              required
              :valid="lastNameBlur || validLastName(lastName)"
              error-message="Pflichtfeld"
              @blur="lastNameBlur = false"
            />
            <SfInput
              v-model="email"
              label="E-Mail"
              name="email"
              class="form__element col--span-full"
              required
              :valid="emailBlur || validEmail(email)"
              error-message="Pflichtfeld"
              @blur="emailBlur = false"
            />
            <SfInput
              v-model="subject"
              label="Thema"
              name="subject"
              class="form__element col--span-full"
              required
              :valid="subjectBlur || validSubject(subject)"
              error-message="Pflichtfeld"
              @blur="subjectBlur = false"
            />
          </div>
          <div class="form__group">
            <SfTextarea
              v-model="message"
              label="Ihre Nachricht"
              name="Message"
              class="form__element col--span-full"
              width="100%"
              required
              :valid="lastNameBlur || validLastName(lastName)"
              error-message="Pflichtfeld"
              @blur="lastNameBlur = false"
            />
          </div>
          <div class="form__action">
            <SfButton
              type="submit"
              class="sf-button form__submit form__action-button--lg"
            >
              Senden
            </SfButton>
          </div>
        </form>
      </div>
    </transition>
  </SfModal>
</template>
<script>
import { SfModal, SfInput, SfButton, SfTextarea } from "@highdigital/vuet";
export default {
  name: "Contact",
  components: {
    SfModal,
    SfInput,
    SfButton,
    SfTextarea,
  },
  data() {
    return {
      email: "",
      firstName: "",
      firstNameBlur: true,
      lastName: "",
      lastNameBlur: true,
      subject: "",
      subjectBlur: true,
    };
  },
  computed: {
    modalTitle() {
      return this.isLogIn ? "Log In" : "Join Vue Storefront";
    },
  },
  watch: {
    isLogIn() {
      this.email = "";
      this.password = "";
      this.createAccount = false;
      this.rememberMe = false;
      this.firstName = "";
      this.lastName = "";
    },
  },
  methods: {
    validate() {
      this.firstNameBlur = false;
      this.lastNameBlur = false;
      this.emailBlur = false;
      this.subjectBlur = false;
      this.messageBlur = false;
      if (
        this.validEmail(this.email) &&
        this.validFirstName(this.firstName) &&
        this.validLastName(this.lastName) &&
        this.validSubject(this.subject)
      ) {
        this.valid = true;
      }
    },
    validFirstName(firstName) {
      return firstName.length > 2;
    },
    validLastName(lastName) {
      return lastName.length > 2;
    },
    validEmail(email) {
      const regex = /(.+)@(.+){2,}\.(.+){2,}/;
      return regex.test(email.toLowerCase());
    },
    validSubject(subject) {
      return subject.length > 2;
    },
    validMessage(message) {
      return !!message && message.length > 10 && message.length <= 400;
    },
    submit() {
      this.validate();
      if (this.valid) {
        this.submitted = true;
      }
    },
    reset() {
      this.email = "";
      this.lastName = "";
      this.firstName = "";
      this.subject = "";
      this.message = "";
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@highdigital/vuet/styles";
.modal-content,
.aside {
  display: flex;
  flex-direction: column;
}
#form-template {
  box-sizing: border-box;
  padding: 0 var(--spacer-sm);
  @include for-desktop {
    padding: 0 var(--spacer-sm);
    max-width: 870px;
    margin: 0 auto;
  }
}
.form {
  display: grid;
  grid-gap: var(--spacer-lg);
  &__radios {
    display: flex;
    & > * + * {
      margin-left: var(--spacer-xl);
    }
  }
  &__group {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 100%;
    @include for-desktop {
      grid-template-columns: repeat(6, 1fr);
    }
  }
  &__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    & > * + * {
      margin-top: var(--spacer-sm);
    }
    @include for-desktop {
      flex-direction: row;
      justify-content: space-between;
      & > * + * {
        margin-top: 0;
      }
    }
  }
  &__login {
    display: flex;
    & > * + * {
      margin-left: var(--spacer-sm);
    }
  }
  &__action-button--lg {
    padding: var(--spacer-base) var(--spacer-xl);
  }
  &__header {
    font-family: var(--font-primary);
    font-size: var(--font-size--lg);
    font-weight: normal;
    margin-bottom: 0;
  }
}
.col {
  &--span-2 {
    grid-column: 1 / -1;
    @include for-desktop {
      grid-column: span 2;
    }
  }
  &--span-3 {
    grid-column: 1 / -1;
    @include for-desktop {
      grid-column: span 3;
    }
  }
  &--span-full {
    grid-column: 1 / -1;
  }
}
</style>
