import React from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import { useState,useEffect } from "react";
import { useParams } from 'react-router-dom';

export default function AdminEditUser(props){

    const { userid } = useParams('');
    const [inputField , setInputField] = useState({fullname:'',mobile:'',city:'',userid:'',username:''});

    const handleChange = (e) =>{
        const value = e.target.value;
        setInputField({
            ...inputField,
            [e.target.name]: value
        });
    }
    
    const fetchData =()=>{
        //alert(userid)
        fetch('http://localhost:8081/user_details_api/'+userid)
        .then((response) =>{            
            return response.json();
        }).then((data)=>{
            console.log(data[0])
            setInputField({ ...inputField, fullname: data[0].fullname, mobile: data[0].mobile, username: data[0].username,
               city: data[0].city,})
        })
    }
    useEffect(()=>{
        fetchData();
    },[])

    const handleSubmit = (e) =>{e.preventDefault();
        var fullname=inputField.fullname;
        var mobile=inputField.mobile;
        var username=inputField.username;
        var city=inputField.city;
        axios.post('http://localhost:8081/updateuser_api/'+userid, {city,fullname,mobile,username})
            .then((res) => {
            console.log(res.data);
            //if(res.status==1){this.componentDidMount();}
        }).catch((err) => alert("File Upload Error"));    
    }

    return(
        <div className="content-wrapper">
                <section className="content-header">
                    <h5>Add New User</h5>
                    <ol className="breadcrumb">
                        <li><Link to="/admin"><i className="fa fa-dashboard"></i> Home</Link></li>
                        <li className="active">User Add/Edit</li>
                    </ol>
                </section>
                <section className="content">
                    <div className="row clearfix">
                        <div className="col-md-4">  
                        <div className="panel panel-primary cardbg">
                            <div className="panel-body">                
                            <form onSubmit={handleSubmit} method='post'>
                                <input type="hidden" name='userid' value={userid}/>
                                <div className='form-group'>
                                    <label>Full Name</label>
                                    <input type="text" onChange={handleChange} 
                                    className="form-control" value={inputField.fullname} required name='fullname'/>
                                </div>
                                <div className='form-group'>
                                    <label>Mobile</label>
                                    <input type="text" onChange={handleChange}  
                                    className="form-control" value={inputField.mobile} required name='mobile'/>
                                </div>
                                <div className='form-group'>
                                    <label>Username</label>
                                    <input type="text" onChange={handleChange} 
                                    className="form-control" value={inputField.username} required name='username'/>
                                </div>
                                <div className='form-group'>
                                    <label>City</label>
                                    <input type="text" onChange={handleChange} 
                                    className="form-control" value={inputField.city} required name='city'/>
                                </div>
                                <button className='btn btn-primary' type='submit'>Update User</button>
                            </form>
                            </div></div>
                        </div>
                    </div>  
                </section>  
            </div>
    )
}