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 ForgotPassword(props){
    const navigate = useNavigate();
    const [otp, setOtp] = useState('');
    
    const [inputField , setInputField] = useState({username:'',userotp:'',userid:''});

    const handleChange = (e) =>{
        const value = e.target.value;
        setInputField({
            ...inputField,
            [e.target.name]: value
        });
    }

    const formSubmit = param => e => {e.preventDefault();
       
        axios.post('https://capitalsgrowth.in/Rest/check_user_api/',{username:inputField.username})
            .then((res) => {
            console.log(res.data);//return false;
            alert(res.data.msg); 
            if(res.data.status==0){
                setInputField({
                    ...inputField,userotp: res.data.otp,userid:res.data.user
                });
            }       
        }).catch((err) => alert("Could not check"));    
    }

    const otpSubmit=()=>{
        if(otp==inputField.userotp){
            navigate("/resetpassword/"+inputField.userid);
        }else{
            alert("Incorrect OTP")
        }
    }

        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">Forgot Password</div>
                <div className="right"> </div>
            </div>
    <div id="appCapsule">
        <div className="section">
            <div className="splash-page  pt-1 pb-1">
            {inputField.userotp=='' &&
                        <div className="form-group basic">
                            <div className="input-wrapper">
                                <label className="label" for="email1">Your Registered Mobile or Email</label>
                                <input type="text" name="username" value={inputField.username} onChange={handleChange} 
                                 className="form-control" placeholder=""/>
                            </div>
                        </div>}

                        {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=='' && 
            <button type='button' onClick={formSubmit()} className="btn btn-lg btn-danger btn-block">Reset Password</button>}     

            
        </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>
            </div>
        )
    }



