text: import * as Yup from 'yup';
  import { useState } from 'react';
  import { Icon } from '@iconify/react';
  import { useFormik, Form, FormikProvider } from 'formik';
  import eyeFill from '@iconify/icons-eva/eye-fill';
  import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
  import { useNavigate } from 'react-router-dom';
  // material
  import { Stack, TextField, IconButton, InputAdornment } from '@material-ui/core';
  import { LoadingButton } from '@material-ui/lab';
  // firebase
  import { auth,db,createUserWithEmailAndPassword } from '../../../firebase.js';
  import { collection, addDoc, setDoc, doc } from "firebase/firestore";
  import { onAuthStateChanged,updateProfile } from 'firebase/auth';
  // ----------------------------------------------------------------------
  
  export default function RegisterForm() {
    const navigate = useNavigate();
    const [showPassword, setShowPassword] = useState(false);
  
    const RegisterSchema = Yup.object().shape({
      firstName: Yup.string()
        .min(2, 'Too Short!')
        .max(50, 'Too Long!')
        .required('First name required'),
      lastName: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Last name required'),
      email: Yup.string().email('Email must be a valid email address').required('Email is required'),
      password: Yup.string().required('Password is required')
    });
    var user = {uid:"",
    firstName:"",
    lastName:"",
    email:"",
    uid:"",
    time:""
  };
    const formik = useFormik({
      initialValues: {
        firstName: '',
        lastName: '',
        email: '',
        password: ''
      },
      validationSchema: RegisterSchema,
      onSubmit: () => {
          createUserWithEmailAndPassword(auth,  
            formik.values.email, formik.values.password
              ).then(onAuthStateChanged(auth,(userAuth) => {
                  if(userAuth){
                    console.log(userAuth.uid);
                    user.uid = userAuth.uid;
                    user.email = userAuth.email;
                    user.time = Date.now();
                    try{
                       setDoc(doc(db,"Users","Profile"),{
                        firstName: formik.values.firstName,
                        lastName: formik.values.lastName,
                        u_id: userAuth.uid
                      });
                    localStorage.setItem("logged_in",JSON.stringify(user));
                    navigate('/dashboard', { replace: true });
                  } catch (e) {
                    alert(e);
                    console.error("Error adding document: ", e);
                  }
                  }
                })).catch(err => {
              console.log(err)
              })
      }
    });
  
    const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik;
  
    return (
      <FormikProvider value={formik}>
        <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
          <Stack spacing={3}>
            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
              <TextField
                fullWidth
                label="First name"
                {...getFieldProps('firstName')}
                error={Boolean(touched.firstName && errors.firstName)}
                helperText={touched.firstName && errors.firstName}
              />
  
              <TextField
                fullWidth
                label="Last name"
                {...getFieldProps('lastName')}
                error={Boolean(touched.lastName && errors.lastName)}
                helperText={touched.lastName && errors.lastName}
              />
            </Stack>
  
            <TextField
              fullWidth
              autoComplete="username"
              type="email"
              label="Email address"
              {...getFieldProps('email')}
              error={Boolean(touched.email && errors.email)}
              helperText={touched.email && errors.email}
            />
  
            <TextField
              fullWidth
              autoComplete="current-password"
              type={showPassword ? 'text' : 'password'}
              label="Password"
              {...getFieldProps('password')}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
                      <Icon icon={showPassword ? eyeFill : eyeOffFill} />
                    </IconButton>
                  </InputAdornment>
                )
              }}
              error={Boolean(touched.password && errors.password)}
              helperText={touched.password && errors.password}
            />
  
            <LoadingButton
              fullWidth
              size="large"
              type="submit"
              variant="contained"
              loading={isSubmitting}
            >
              Register
            </LoadingButton>
          </Stack>
        </Form>
      </FormikProvider>
    );
  }
  