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 [inputField , setInputField] = useState({name:'',phone:'',email:'',password:'',cpassword:'',userotp:'',aadhar:'',pan:'',
city:'',pincode:'',aadhar_img:'',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 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 formSubmit = param => e => {e.preventDefault();        
        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://commfinstock.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;
            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();        
          
    }

        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="/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(e)} 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 Image</label>
                            <input type="file"  onChange={handleFile(e)} className="form-control" name='aadhar_img'/>
                        </div>

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

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

        

    </div>
            </div>
        )
    }



