import {useState} from 'react'

const Home = () => {

    const [username, setUsername] = useState('')
    const [email, setEmail] = useState('')
    const [group, setGroup] = useState('Dev')
    const [errorMsg, setErrorMsg] = useState('')
    const [successMsg, setSuccessMsg] = useState('')

    const url = 'http://localhost:3333/add-user' // for local development
    const handleFormSubmit = (e) => {
        e.preventDefault()
        if (username.length === 0 || email.length === 0 || group.length === 0) {
            setErrorMsg('Incomplete user data')
            setSuccessMsg('')
            setTimeout(() => {
                setErrorMsg('') 
                setUsername('')
                setEmail('')        
            }, 5000)
        }else {
            console.log(username, email, group)
            fetch(url, {
                method : 'POST',
                headers : {
                    'Content-Type' : 'application/json'
                },
                body : JSON.stringify({username, email, group})     
            })
            .then((response) => {
                return response.json()
            })
            .then((data) => {
                if (data.message === 'no_username') {
                    setErrorMsg('username is required')
                    setSuccessMsg('')
                    setTimeout(() => {
                        setErrorMsg('') 
                        setUsername('')
                        setEmail('')        
                    }, 5000)
                }else if (data.message === 'no_email') {
                    setErrorMsg('email is required')
                    setSuccessMsg('')
                    setTimeout(() => {
                        setErrorMsg('') 
                        setUsername('')
                        setEmail('')        
                    }, 5000)
                }else if (data.message === 'no_group') {
                    setErrorMsg('group is required')
                    setSuccessMsg('')
                    setTimeout(() => {
                        setErrorMsg('') 
                        setUsername('')
                        setEmail('')        
                    }, 5000)
                }else if (data.message === 'user_exist') {
                    setErrorMsg('User already exist')
                    setSuccessMsg('')
                    setTimeout(() => {
                        setErrorMsg('') 
                        setUsername('')
                        setEmail('')        
                    }, 5000)
                }else if (data.message === 'server_error') {
                    setErrorMsg('Server error. Try again later')
                    setSuccessMsg('')
                    setTimeout(() => {
                        setErrorMsg('') 
                        setUsername('')
                        setEmail('')        
                    }, 3000)
                }else if (data.message === 'user_added') {
                    setSuccessMsg('User successfully created')
                    setErrorMsg('')
                    setTimeout(() => {
                        setSuccessMsg('') 
                        setUsername('')
                        setEmail('')        
                    }, 5000)
                }
            })
            .catch((err) => {
                console.log(err)
                setErrorMsg('Error occured. Try again later')
                setSuccessMsg('')
                setTimeout(() => {
                    setErrorMsg('') 
                    setUsername('')
                    setEmail('')        
                }, 5000)
            })
        }
    }

    return (
        <div className="container">
            <h2 className='heading'>Create a New IAM User</h2>
            <div className="form-container">
                <form onSubmit={handleFormSubmit}>
                    <div className="username">
                        <span className="username-text">Username:</span>
                        <input 
                        className='username-input'
                        type="text"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        />
                    </div>
                    <div className="email">
                        <span className="email-text">Email:</span>
                        <input 
                        className='email-input'
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        />
                    </div>
                    <div className="group">
                        <span className="group-text">Group:</span>
                        <select
                        className='group-input'
                        value={group}
                        onChange={(e)=> setGroup(e.target.value)}>
                            <option value="Dev">Dev</option>
                            <option value="HR">HR</option>
                            <option value="Marketing">Marketing</option>
                        </select>
                    </div>
                    <div className="btn-div">
                        <button>Create User</button>
                    </div>
                    {errorMsg && <p className="error-msg">{errorMsg}</p>}
                    {successMsg && <p className="success-msg">{successMsg}</p>}
                </form>
            </div>
        </div>
    )
}

export default Home