import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'

function Signup() {

    const [data, setData] = useState({
        name:"",
        pass:""
    })
    const [error, setError] = useState({})

    const navigate = useNavigate()

    const handleChange = (e)=>{
        const {name ,value} = e.target
        setData({...data, [name]: value})
        setError({...error, [name] : ""})
    }

    const handleError = () =>{
        let error = {}
        let valid = true
        if (data.name === "") {
            error.name = "*"
            valid = false
        }
        if (data.pass === "") {
            error.pass = "*"
            valid = false
        }
        setError(error)
        return valid =  true

    }

    const handleSubmmite = () =>{
        if (handleError()) {
            const getData = JSON.parse(localStorage.getItem("user")) || []
            getData.push({...data})
            localStorage.setItem("user",JSON.stringify(getData))
            setData({
                name:"",
                pass:""
            })
            navigate("/login")
        }
    }

  return (
    <div>
        <label>Name<span>{error.name}</span></label><br/>
        <input type='text' value={data.name} onChange={handleChange} name='name'/>
        <br/>
        <label>pass{error.name}</label><br/>
        <input type='password' value={data.pass} onChange={handleChange} name='pass'/><br/><br/>
        <button onClick={handleSubmmite}>sub</button>
    </div>
  )
}

export default Signup