import { Validator } from "mytabworks-utils";

const result = Validator.validate("sample_sadas@", "required|email|min:10|max:20", "Email")
console.log(result) 
/*{ isInvalid: true, message: "The Email must be a valid email"}*/

import { Validator } from "mytabworks-utils";
import { max_size, min_size } from "mytabworks-utils/extend/rules";

Validator.rulesExtend({ max_size, min_size }) // extending max_size and min_size

const profile_p = document.querySelector(`input[name="profile_p"]`)
const received = profile_p.files /*imagine files name is photo.jpeg and have 1000kb size*/
const rules = "required|max:2|mimes:jpeg,jpg|min_size:1000|max_size:3000"
const label = "Profile photo"
const result = Validate.validate(received, rules, label)
console.log(result) 
/*{ isInvalid: false, message: null }*/ 

import { Validator } from "mytabworks-utils";
import { required_if, same } from "mytabworks-utils/extend/rules";

const strong_password = {
    regexp: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).+$/g,
    exe(received, first_param, second_param ) {
        /*
        recieved - it is the received value of the field
        first_param - rules:<first_param> it is use when custom rules have first parameter like min, max, mimes, etc.
        second_param - rules:<first_param>=<second_param> it is use when custom rules have first and second parameter like required_if.
        */

        /*first_param and second_param are not needed for this validation*/
        /*note! must return true when it is INVALID*/
        return !this.regexp.test(received)
    },
    message: "The :attribute must have 1 small letter, 1 capital letter, 1 number, and 1 special character"
    /*note! in messages
        the :attribute is replace by the label inputed.
        the name of rule like :strong_password can be use to replace by first_param inputed
        the :third_party is replace by the second_param 
    */
}

Validator.rulesExtend({ required_if, same, strong_password })

const pass = document.querySelector(`input[name="pass"]`)
const received = pass.value /*imagine value is Secretpssrd*/
const rules = "required|min:8|strong_password"

const label = "Password"
const result = validator.validate(received, rules, label)
console.log(result) 
/*{ isInvalid: false, message: "The Password must have 1 small letter, 1 capital letter, 1 number, and 1 special character" }*/

const confirm = document.querySelector(`input[name="confirm"]`)
const c_received = confirm.value /*imagine value is "" */
const c_rules = "required_if:pass=.+|same:pass"

const c_label = "Confirm"
const c_result = validator.validate(c_received, c_rules, c_label)
console.log(c_result)
/*{ isInvalid: true, message: "The Confirm field is required when pass is .+." }*/

/*To correct the message above, you must put a Alias(@) on the required_if "value" and "value of value".
since most of the time field names are not the same as the labels and same with the values label. that is why you can use Aliasing(@)*/
const aliased_rules = "required_if:pass@Password=.+@contain value|same:pass@Password"
const c_result2 = validator.validate(c_received, aliased_rules, c_label)
console.log(c_result2)
/*{ isInvalid: true, message: "The Confirm field is required when Password is contain value." }*/

const forms = {
    first_name: "john",
    last_name: "doe",
    email: "johndoe@gmail",
    web: "mytabworks.com",
    items: ["90293", "23223", "23232"]
}

const rules = {
    first_name: { 
        label: "First Name", 
        rules: "required|alpha" 
    },
    last_name: { 
        label: "Last Name", 
        rules: "required|alpha|min:3" 
    },
    email: { 
        label: "E-mail", 
        rules: "required|email"
    },
    web: { 
        label: "Website", 
        rules: "url"
    }
}

const validator = Validator.make(forms, rules)

if(validator.fails()) {

    const message = validator.errors()
 
    document.getElementById("first_name_error").textContent =  message.has("first_name") ? message.get("first_name") : ""
    document.getElementById("last_name_error").textContent = message.has("last_name") ? message.get("last_name") : ""
    document.getElementById("email_error").textContent = message.has("email") ? message.get("email") : ""
    document.getElementById("web_error").textContent = message.has("web") ? message.get("web") : ""

    //OR
    let collect = "<ul>"
    message.forEach((message, name) => {
        // do something
        collect += `<li>${message}</li>`
    })
    collect += "</ul>"

    document.getElementById("errors").innerHTML = collect
}

import React from "react";
import { DoneTypingEvent } from "mytabworks-utils"; 

export const Input () => { 
    const handleDoneTyping = DoneTypingEvent(event => {
        /*triggered when done typing*/
        const value = event.target.value
    }, 500) /*miliseconds to wait every enrty before it fire*/

    return (
        <input type="text" {...handleDoneTyping}>
    )
}

"transformIgnorePatterns": [
    "/node_modules/(?!(?:mytabwork-utils))"
]

module.exports = {
    "presets": [
        "react-app"
      ]
}

"scripts": {
    "test": "react-app test --transformIgnorePatterns '/node_modules/(?!(?:mytabwork-utils))'"
}