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';
import OtpInput from 'react-otp-input';

export default function Register(props){
    const navigate = useNavigate();
    const [otp, setOtp] = useState('');
    const [loader, setLoader] = useState(false);
    const [inputField , setInputField] = useState({name:'',phone:'',email:'',password:'',cpassword:'',userotp:'',aadhar:'',pan:'',
city:'',pincode:'',aadhar_img:'',aadhar_img1:'',pan_img:''});

    const handleChange = (e) =>{
        const value = e.target.value;
        setInputField({
            ...inputField,
            [e.target.name]: value
        });
    }
    
    const handleFile=(e)=>{
        console.log(e.target.files[0]);
        //this.setState({assoc_img:e.target.files[0]})
        setInputField({
            ...inputField,
            aadhar_img: e.target.files[0]
        });
    }
    const handleFile1=(e)=>{
        console.log(e.target.files[0]);
        //this.setState({assoc_img:e.target.files[0]})
        setInputField({
            ...inputField,
            aadhar_img1: e.target.files[0]
        });
    }

    const handleFile2=(e)=>{
        console.log(e.target.files[0]);
        //this.setState({assoc_img:e.target.files[0]})
        setInputField({
            ...inputField,
            pan_img: e.target.files[0]
        });
    }

    const submitForm=(event)=>{event.preventDefault();
        
        var formData = new FormData();
        formData.append("name", inputField.name);
        formData.append("email", inputField.email);
        formData.append("phone", inputField.phone);
        formData.append("password", inputField.password);
        formData.append("cpassword", inputField.cpassword);
        formData.append("city", inputField.city);
        formData.append("pincode", inputField.pincode);
        formData.append("aadhar", inputField.aadhar);
        formData.append("pan", inputField.pan);
        formData.append("aadhar_img", inputField.aadhar_img);
        formData.append("pan_img", inputField.pan_img);
        const config = {
            headers: {'content-type': 'multipart/form-data'},
          };      
        axios.post('https://capitalsgrowth.in/Rest/register_api0', formData,config)
            .then((res) => {
                console.log(res.data);
                
                if(res.data.status==0){
                    setInputField({ ...inputField,userotp: res.data.otp});
                }
        }).catch((err) => alert("File Upload Error"));    
    }

    const formSubmit = param => e => {e.preventDefault();    
        setLoader(true)    
        if(inputField.password!=inputField.cpassword){alert("Both Password must match");return false;}
        if(inputField.password.length<6){alert("Both must be atleast 6 char long");return false;}
        if(inputField.name=='' || inputField.email=='' || inputField.phone=='' || inputField.city=='' || inputField.pincode=='' || 
        inputField.aadhar=='' || inputField.pan==''){
            alert("Please Provide all details");return false;
        }
        axios.post('https://capitalsgrowth.in/Rest/register_api0/', {name:inputField.name,mobile:inputField.phone,
        email:inputField.email,password:inputField.password,cpassword:inputField.cpassword})
            .then((res) => {
            console.log(res.data);
            //return false;
            setLoader(false)
            alert(res.data.msg);
            if(res.data.status==0){
                setInputField({
                    ...inputField,userotp: res.data.otp
                });
            }
        }).catch((err) => alert("Error start trading"));    
    }

    const otpSubmit = param => e => {e.preventDefault();        
        if(otp!=inputField.userotp){alert("Incorrect OTP");return false;}
        setLoader(true)
        var formData = new FormData();
        formData.append("name", inputField.name);
        formData.append("email", inputField.email);
        formData.append("mobile", inputField.phone);
        formData.append("password", inputField.password);
        formData.append("cpassword", inputField.cpassword);
        formData.append("city", inputField.city);
        formData.append("pincode", inputField.pincode);
        formData.append("aadhar", inputField.aadhar);
        formData.append("pan", inputField.pan);
        formData.append("aadhar_img", inputField.aadhar_img);
        formData.append("aadhar_img1", inputField.aadhar_img1);
        formData.append("pan_img", inputField.pan_img);
        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://capitalsgrowth.in/Rest/react_register', formData,config)
            .then((res) => {
                setLoader(false)
                console.log(res.data);//return false;
                alert(res.data.msg);
                if(res.data.status==0){
                    navigate("/login");
                }
        }).catch((err) => alert("File Upload Error"));    
        return false;
        axios.post('https://capitalsgrowth.in/Rest/register_api2/', {name:inputField.name,mobile:inputField.phone,email:inputField.email,
    password:inputField.password,city:inputField.city,pincode:inputField.pincode,aadhar:inputField.aadhar,pan:inputField.pan,
aadhar_img:'',pan_img:''})
            .then((res) => {
            console.log(res.data);
            //return false;
            alert(res.data.msg);
            if(res.data.status==0){
                //localStorage.setItem('token',1);
                //localStorage.setItem('isLoggedIn',true);
                //localStorage.setItem('userid',res.data.lid);
                //localStorage.setItem('name',inputField.name);
                navigate("/login");
            }
        }).catch((err) => alert("Error start trading"));    
    }

        return (     
            <div>
                {loader==true &&
                <div className="loader-container">
                    <div className="spinner"></div>
                </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="/login" className="headerButton goBack">
                <i className="fa fa-arrow-left"></i> 
            </Link>
        </div>
        <div className="pageTitle">Create New Account</div>
    </div>

    
    <div id="appCapsule">
    
    
        <div className="section">
        {inputField.userotp!='' &&
    <div className='text-center'><br/>
        <h2 className='text-warning'>Enter 6 Digit OTP</h2><hr/>
    <OtpInput inputStyle={{width:'15%',height:'40px'}} containerStyle={{width:'100%'}}
      value={otp}
      onChange={setOtp}
      numInputs={6}
      renderSeparator={<span>-</span>}
      renderInput={(props) => <input {...props} />}
    /><br/>
    {otp.length==6 &&
       <button type='button' onClick={otpSubmit()} className="btn btn-lg btn-warning btn-block">VERIFY OTP</button>
        }
    </div>}
    {inputField.userotp=='' &&
            <div className="splash-page  pt-1 pb-1">
                
                        <div className="form-group basic">                            
                            <div className="input-wrapper">
                                <label className="label">Name</label>
                                <input type="text" name="name" required value={inputField.name} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

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

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

                        <div className="form-group basic">
                            <div className="input-wrapper">
                                <label className="label">Password</label>
                                <input type="password" name="password" required value={inputField.password} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

                        <div className="form-group basic">
                            <div className="input-wrapper">                            
                                <label className="label">Confirm Password</label>
                                <input type="password" name="cpassword" required value={inputField.cpassword} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

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

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

                        

                        <h2 className='text-danger'>KYC Details</h2>

                        <div className="form-group basic">                            
                            <div className="input-wrapper">
                                <label className="label">Aadhar Number</label>
                                <input type="text" name="aadhar" required value={inputField.aadhar} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

                        <div className="form-group basic">
                            <div className="input-wrapper">
                                <label className="label">PAN Number</label>
                                <input type="text" name="pan" required value={inputField.pan} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>

                        <div className='form-group'>
                            <label>Aadhar Front</label>
                            <input type="file"  onChange={handleFile} className="form-control" name='aadhar_img'/>
                        </div>
                        <div className='form-group'>
                            <label>Aadhar Back</label>
                            <input type="file"  onChange={handleFile1} className="form-control" name='aadhar_img1'/>
                        </div>

                        <div className='form-group'>
                            <label>PAN Image</label>
                            <input type="file"  onChange={handleFile2} className="form-control" name='pan_img'/>
                        </div>


                        
                        <hr/>
            
            </div>}
       
            </div>
            {inputField.userotp=='' &&
        <div className="fixed-bar">
        <button type='button' onClick={formSubmit()} className="btn btn-lg btn-primary btn-block">SUBMIT</button>
        </div>}

        

    </div>
            </div>
        )
    }



