import { observable, action } from "mobx";

class FormStore {
  @observable username = "";
  @observable email = "";
  @observable password = "";
  @observable message = "";
  @observable isValid = false;
  @observable usernameError = "";
  @observable emailError = "";
  @observable passwordError = "";
  @observable messageError = "";


  @action
  usernameOnChange(id) {
    this.username = id;
    this.validateUsername();
  }

  @action
  validateUsername() {
    const usernamePatter = /[^a-zA-Z0-9 ]/i;
    const required = this.username ? undefined : "Required";
    this.usernameError = required
      ? required
      : usernamePatter.test(this.username) ? undefined : "Invalid username";
  }


  @action
  emailOnChange(id) {
    this.email = id;
    this.validateEmail();
  }

  @action
  validateEmail() {
    const emailPatter = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i;
    const required = this.email ? undefined : "Required";
    this.emailError = required
      ? required
      : emailPatter.test(this.email) ? undefined : "Invalid email address";
  }

  @action
  passwordOnChange(pwd) {
    this.password = pwd;
    this.validatePassword();
  }

  @action
  validatePassword() {
    const alphaNumeric = /[^a-zA-Z0-9 ]/i.test(this.password)
      ? "Only alphanumeric characters"
      : undefined;
    const maxLength =
      this.password.length > 15 ? "Must be 15 characters or less" : undefined;
    const minLength =
      this.password.length < 6 ? "Must be 8 characters or more" : undefined;
    const required = this.password ? undefined : "Required";
    this.passwordError = required
      ? required
      : alphaNumeric ? alphaNumeric : maxLength ? maxLength : minLength;
  }

  @action
  messageOnChange(id) {
    this.message = id;
    this.validateMessage();
  }

  @action
  validateMessage() {
    const messagePatter = /[^a-zA-Z0-9 ]/i;
    const required = this.message ? undefined : "Required";
    this.messageError = required
      ? required
      : messagePatter.test(this.message) ? undefined : "Please write a message ";
  }


  @action
  validateSigninForm() {
    if (this.emailError === undefined && this.passwordError === undefined) {
      this.isValid = true;
    }
  }

   @action
  validateSignupForm() {
    if (this.usernameError === undefined & this.emailError === undefined && this.passwordError === undefined) {
      this.isValid = true;
    }
  }

  @action
  validateForgetpassForm() {
    if (this.emailError === undefined) {
      this.isValid = true;
    }
  }


  @action
  validateContactForm() {
    if (this.emailError === undefined && this.messageError === undefined) {
      this.isValid = true;
    }
  }


  @action
  clearSignin() {
    this.email = "";
    this.isValid = false;
    this.emailError = "";
    this.password = "";
    this.passwordError = "";
  }
}

 @action
  clearSignup() {
    this.username = "";
    this.email = "";
    this.isValid = false;
    this.usernameError = "";
    this.emailError = "";
    this.password = "";
    this.passwordError = "";
  }
}

 @action
  clearForgetpass() {
   this.email = "";
    this.isValid = false;
     this.emailError = "";
      }
}

@action
  clearContact() {
    this.email = "";
    this.isValid = false;
    this.emailError = "";
    this.message = "";
    this.messageError = "";
  }
}

export default FormStore;

@action
      clearSignup() {
        this.username = "";
        this.email = "";
        this.isValid = false;
        this.usernameError = "";
        this.emailError = "";
        this.password = "";
        this.passwordError = "";
      }
    }

     @action
      clearForgetpass() {
       this.email = "";
        this.isValid = false;
         this.emailError = "";
          }
    }

    @action
      clearContact() {
        this.email = "";
        this.isValid = false;
        this.emailError = "";
        this.message = "";
        this.messageError = "";
      }
    }