import React from 'react'
import RegStyle from './Reg.style'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser, faEnvelope, faLock } from '@fortawesome/free-solid-svg-icons'
import { useState, useContext } from 'react'
import { Link } from '@mui/material'
import UserAuth from 'helpers/user/usercontext'
import { useRouter } from 'next/router'
import {PopupMain} from "../Pop_up/Popup.jsx"
import style from "../../styles/popup_style.module.css"

function Reg() {
  const router = useRouter()
  const context = useContext(UserAuth)
  const [userData, setUserData] = useState({
    name: '',
    email: '',
    password: '',
    repassword: '',
  })
  

  const handleInput = (event) => {
    const name = event.target.name
    const value = event.target.value
    setUserData({ ...userData, [name]: value })
  }
  const handleSubmit = async (e) => {
    e.preventDefault()
    setUserData(userData)
    await context.createAcc(userData)
    context.popupHandler(true) //* state change to spwan a popUp
  }

  // disable submit button is any input has not been filled
  const disabledSubmitBtn = Object.values(userData).some((val) => val === '')

  if (context.user ) {
     
        setTimeout(() => {
            router.push('/dashboard')
        }, 4400);
  }
  return <>
  
      <div className={style["container-modal-main"]}>
          {
              (context.showPopUp) ? (context.user) ? <PopupMain message="Successfully Registered" mode="accept" /> :
                  <PopupMain message="Invalid Credentials" mode="error" /> : ""
          }
      
    </div>
    
    <RegStyle>
      <form onSubmit={handleSubmit} className="form-wrapper">
        <p className="reg-title">Sign Up</p>

        <div className="reg-field">
          <div className="reg-label">
            <FontAwesomeIcon icon={faUser} />
          </div>
          <input
            className="reg-input"
            name="name"
            autoComplete="off"
            type="text"
            value={userData.name}
            onChange={handleInput}
            placeholder="Full Name"
          />
        </div>

        <div className="reg-field">
          <div className="reg-label">
            <FontAwesomeIcon icon={faEnvelope} />
          </div>
          <input
            className="reg-input"
            name="email"
            autoComplete="off"
            onChange={handleInput}
            type="text"
            value={userData.email}
            placeholder="Email Address"
          />
        </div>

        <div className="reg-field">
          <div className="reg-label">
            <FontAwesomeIcon icon={faLock} />
          </div>
          <input
            className="reg-input"
            name="password"
            autoComplete="off"
            onChange={handleInput}
            type="password"
            value={userData.password}
            placeholder="Password"
          />
        </div>

        <div className="reg-field">
          <div className="reg-label">
            <FontAwesomeIcon icon={faLock} />
          </div>
          <input
            className="reg-input"
            name="repassword"
            autoComplete="off"
            onChange={handleInput}
            type="password"
            value={userData.repassword}
            placeholder="Confirm Password"
          />
        </div>

        <button
          type="submit"
          className="submit-button"
          disabled={disabledSubmitBtn}
        >
          Submit
        </button>

        <p className="foot-text">
          Already registered? Login&nbsp;
          <Link href="/login" exact className="foot-text underline">
            here
          </Link>
        </p>
      </form>
    </RegStyle>
    
  </>
    
  
}
export default Reg