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

export default function Profile(props){
    
    const [inputField , setInputField] = useState({name:'',email:'',mobile:'',city:'',pincode:''});

    const handleChange = (e) =>{
        const value = e.target.value;
        setInputField({
            ...inputField,
            [e.target.name]: value
        });
    }
    
    const fetchData =()=>{
        fetch('https://capitalsgrowth.in/Rest/user_details_api/'+localStorage.getItem('userid'))
        .then((response) =>{
            return response.json();
        }).then((data)=>{
            console.log(data)
            setInputField({ ...inputField,name: data.first_name,email:data.email,mobile:data.mobile,city:data.city,pincode:data.zipcode})
        });
       
    }
    useEffect(()=>{
        fetchData();
    },[])

    const formSubmit = param => e => {e.preventDefault();
        //console.log('param '+param);return false;
        //if(inputField.lot==''){alert("Please Enter Lot");return false;}
        var formData = new FormData();
        formData.append("first_name", inputField.name);
        formData.append("email", inputField.email);
        //formData.append("mobile", inputField.mobile);
        formData.append("city", inputField.city);
        formData.append("zipcode", inputField.pincode);
        formData.append("id", localStorage.getItem('userid'));
        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://capitalsgrowth.in/Rest/bank_update_api', formData,config)
            .then((res) => {
            //console.log(res.data);return false;
            alert(res.data.msg);
            
        }).catch((err) => alert("Error start trading"));    
    }

        return (     
            <div>
            <Helmet>
            <title>MCX Trading</title>
            <link rel="stylesheet" href="/site/css/style.css"/>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 
            <script src="/site/js/lib/bootstrap.bundle.min.js"></script>
            <script src="/site/js/plugins/splide/splide.min.js"></script>
            
            </Helmet>
            
            <div className="appHeader no-border">
        <div className="left">
            <Link to="/settings" className="headerButton goBack">
                <i className="fa fa-arrow-left"></i> 
            </Link>
        </div>
        <div className="pageTitle">Profile Details</div>
        <div className="right"> </div>
    </div>
    <div id="appCapsule">
    
        <div className="section">
            <div className="splash-page  pt-1 pb-1">
                
                        <div className="form-group basic">
                            <div className="input-wrapper">
                                <label className="label" for="email1">Name</label>
                                <input type="text" name="name" value={inputField.name} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

                        <div className="form-group basic">
                            <div className="input-wrapper">
                                <label className="label" for="email1">Email</label>
                                <input type="text" name="email" value={inputField.email} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

                        <div className="form-group basic">
                            <div className="input-wrapper">
                                <label className="label" for="Phone">Mobile</label>
                                <input type="text" disabled name="mobile" value={inputField.mobile} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

                        <div className="form-group basic">
                            <div className="input-wrapper">
                                <label className="label" for="email1">City</label>
                                <input type="text" name="city" value={inputField.city} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

                        <div className="form-group basic">
                            <div className="input-wrapper">
                                <label className="label" for="email1">Pincode</label>
                                <input type="text" name="pincode" value={inputField.pincode} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>
                    

            
        </div>
        {/* <div className="section full">
                    <div className="wide-block pt-1 pb-1">
                        <div className="form-check form-check-inline">
                            <input className="form-check-input" onChange={handleChange} value='normal' type="radio" name="otype"
                            checked={inputField.otype === "normal"}/>
                            <label className="form-check-label" for="normal"> Normal Order </label>
                        </div> &nbsp;&nbsp;&nbsp;
                        <div className="form-check form-check-inline">
                            <input className="form-check-input" onChange={handleChange} value='stoploss' type="radio" name="otype" 
                            checked={inputField.otype === "stoploss"}/>
                            <label className="form-check-label" for="stoploss"> Stoploss </label>
                        </div> 
                    </div>
                </div> */}
            </div>

        <div className="fixed-bar">
        <button type='button' onClick={formSubmit()} className="btn btn-lg btn-danger btn-block">UPDATE</button>
        </div>

    </div>
            </div>
        )
    }


