Source: data/Validate.js

import { createContext, useContext, useEffect, useState } from "react"
import { booleanString, FormContext, processOptions } from "../.."

/**
 * Componente que crea un contexto de manejo de validaciones para un form o formExt
 * @name Reactor.Components.Data.Validate
 * @param {JsonString} [rules = "{}"]
 *  Reglas de validacion, hay reglas para todos los tipos de datos y reglas especificas para el tipo de dato especificado
 * @param {BooleanString} [debug = "false"] 
 * @class
 * @example
<form action="AppDevelopement" data='{"event": "test"}' to="AppDevelopement">
  <validate 
    rules='{
      "nombre": {
        "string": {
          "required": { "message": "El nombre es requerido" },
          "max": { "value": 20, "message": "Debe tener maximo 20 caracteres"}
        }
      },
      "datos": {
        "object": {
          "shape": {
            "value": {
              "edad": {
                "number": {
                  "typeError": { "message": "Numero invalido" },
                  "required": { "message": "La edad es requerida" },
                  "positive": { "message": "Debe ser un numero positivo" },
                  "integer": { "message": "Debe ser un numero entero" }               
                }
              }
            }
          }
        }
      }
      
    }'
    debug="true"
  ></validate>

  <input type="text" name="nombre" use_change="false" />
  <validate_checker path="nombre" ok="AppDevelopmentInputOk" error="AppDevelopmentInputError" untouch="AppDevelopmentInputUntouch"></validate_checker>

  <input type="text" name="datos.edad" use_change="false" />
  <validate_checker path="datos.edad" ok="AppDevelopmentInputOk" error="AppDevelopmentInputError" untouch="AppDevelopmentInputUntouch"></validate_checker>

  <br/>
  <input type="submit" value="enviar"/>

</form>
*/


export const Validate = ({name = "validation", rules = "{}", on_change = "false", children, debug = "false"}) => {

  const { validation, formInputData } = useContext(FormContext);

  useEffect(()=>{
    booleanString(debug) && console.log(formInputData)
    if(!booleanString(on_change)) return;
    validation.isValidFn(formInputData, ()=>{});
  }, [formInputData]);

  useEffect(()=>{
    const validationField = {name, rules: processOptions(rules)};
    booleanString(debug) && console.log({event: "addValidationField", validationField});
    validation.addValidationField(validationField);
    return ()=>{
      booleanString(debug) && console.log({event: "removeValidationField", name});
      validation.removeValidationField({name});
    }
  }, [rules, name, debug])

  return (
      <>{children}</>
  );
}

export const ValidateContext = createContext({error: {message: null, id: 0}});