text: import React, { useState } from "react";
  import { useMutation, gql } from "@apollo/client";
  import { useRouter } from "next/router";
  import { useFormik } from "formik";
  import * as Yup from "yup";
  import Layout from "../components/Layout";
  
  const NUEVA_CUENTA = gql`
    mutation nuevoUsuario($input: UsuarioInput) {
      nuevoUsuario(input: $input) {
        id
        nombre
        apellido
        email
      }
    }
  `;
  
  const NuevaCuenta = () => {
    // obtener productos prueba
    const [mensaje, setMensaje] = useState(null);
    const [nuevoUsuario] = useMutation(NUEVA_CUENTA);
    const router = useRouter();
  
    //validacion de formulario
    const formik = useFormik({
      initialValues: {
        nombre: "",
        apellido: "",
        email: "",
        password: "",
      },
      validationSchema: Yup.object({
        nombre: Yup.string()
          .required("El nombre es obligatorio")
          .min(2, "el escriba al menos 2 letras"),
        apellido: Yup.string(),
        email: Yup.string()
          .email("El email no es valido")
          .required("El email es obligatorio"),
        password: Yup.string()
          .required("El password es obligatorio")
          .min(4, "el password debe tener minimo 4 digitos"),
      }),
      onSubmit: async (valores) => {
        const { nombre, apellido, email, password } = valores;
  
        try {
          const { data } = await nuevoUsuario({
            variables: {
              input: {
                nombre,
                apellido,
                email,
                password,
              },
            },
          });
  
          setMensaje(
            `Se creo correctamento el usuario: ${data.nuevoUsuario.nombre}`
          );
  
          setTimeout(() => {
            setMensaje(null);
            router.push("/login");
          }, 3000);
        } catch (error) {
          setMensaje(error.message.replace("GraphQL error:", ""));
          setTimeout(() => {
            setMensaje(null);
          }, 3000);
        }
      },
    });
  
    const mostrarMensaje = () => {
      return (
        <div className="bg-white py-2 px-3 w-full my-3 max-w-sm text-center mx-auto">
          <p>{mensaje}</p>
        </div>
      );
    };
  
    return (
      <>
        <Layout>
          {mensaje && mostrarMensaje()}
          <h1 className="text-center text-2xl text-black font-ligth">
            Crear Nueva Cuenta
          </h1>
          <div className="flex justify-center mt-5">
            <div className="w-full max-w-sm">
              <form
                className="bg-white rounded shadow-md px-8 pt-6 pb-8 mb-4"
                onSubmit={formik.handleSubmit}
              >
                <div className="mb-4">
                  <label
                    className="block text-gray-700 text-sm font-bold mb-2"
                    htmlFor="nombre"
                  >
                    Nombre
                  </label>
                  <input
                    id="nombre"
                    type="text"
                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 focus:outline focus:shadow-outline"
                    placeholder="Nombre"
                    onChange={formik.handleChange}
                    value={formik.values.nombre}
                    onBlur={formik.handleBlur}
                  />
                </div>
                {formik.touched.nombre && formik.errors.nombre ? (
                  <div className="my-2 bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
                    <p className="font-bold"> Error </p>
                    <p>{formik.errors.nombre} </p>
                  </div>
                ) : null}
                <div className="mb-4">
                  <label
                    className="block text-gray-700 text-sm font-bold mb-2"
                    htmlFor="apellido"
                  >
                    Apellido
                  </label>
                  <input
                    id="apellido"
                    type="text"
                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 focus:outline focus:shadow-outline"
                    placeholder="Apellido"
                    onChange={formik.handleChange}
                    value={formik.values.apellido}
                  />
                </div>
                <div className="mb-4">
                  <label
                    className="block text-gray-700 text-sm font-bold mb-2"
                    htmlFor="email"
                  >
                    Email
                  </label>
                  <input
                    id="email"
                    type="email"
                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 focus:outline focus:shadow-outline"
                    placeholder="Email"
                    onChange={formik.handleChange}
                    value={formik.values.email}
                  />
                </div>
                {formik.touched.email && formik.errors.email ? (
                  <div className="my-2 bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
                    <p className="font-bold"> Error </p>
                    <p>{formik.errors.email} </p>
                  </div>
                ) : null}
                <div className="mb-4">
                  <label
                    className="block text-gray-700 text-sm font-bold mb-2"
                    htmlFor="password"
                  >
                    Password
                  </label>
                  <input
                    id="password"
                    type="password"
                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 focus:outline focus:shadow-outline"
                    placeholder="password"
                    onChange={formik.handleChange}
                    value={formik.values.password}
                  />
                </div>
                {formik.touched.password && formik.errors.password ? (
                  <div className="my-2 bg-red-100 border-l-4 border-red-500 text-red-700 p-4">
                    <p className="font-bold"> Error </p>
                    <p>{formik.errors.password} </p>
                  </div>
                ) : null}
                <input
                  type="submit"
                  className="bg-gray-800 w-full mt-5 p-2 text-white uppercase hover:cursor-pointer hover:bg-gray-700"
                  value="Nueva Cuenta"
                />
              </form>
            </div>
          </div>
        </Layout>
      </>
    );
  };
  
  export default NuevaCuenta;
  