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

function Frontend(navigation) {
    const navigate = useNavigate();

    const navrto = (e) =>{
        //alert(e)   
        navigate("/"+e);
    }
    const logout2=()=>{
        //console.log('logout');return false;
        localStorage.clear();
        navigate("/login");
    }

    const [bal, setBal] = useState("");

    useEffect(() => {        
        const fetchData = async () => {
            var userid= localStorage.getItem('userid');
            axios.get('https://capitalsgrowth.in/Rest/wallet_api/'+userid).then(res => {
                console.log(res.data);
                setBal(res.data.wallet)
            });
        };

        fetchData();
    }, []);
  return (
    <div>
        <Helmet>
          <title>MCX Trading App</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 bg-primary text-light">
                <div className="left">
                    <a href="#" className="headerButton" data-bs-toggle="modal" data-bs-target="#sidebarPanel">
                        <i className="fa fa-bars fa-2x"></i>
                    </a>
                </div>
                <div className="pageTitle">FINSTOCK CAPITAL
                    {/* <img src="https://traderguru7.com/app/assets/images/logo1.png" alt="logo" className="logo"/> */}
                </div>
                <div className="right">
                    {/* <Link to="/" className="headerButton">
                        <i className="fa fa-bell"></i>
                        <span className="badge badge-danger">4</span>
                    </Link> */}
                    <Link to="/settings" className="headerButton">
                        <img src="/site/img/user.png" alt="image" className="imaged w32"/>
                        <span className="badge badge-danger">6</span>
                    </Link>
                </div>
            </div>
            <div id="appCapsule"><div>
                    <Outlet/>
            </div></div>
            <div className="modal fade panelbox panelbox-left" id="sidebarPanel" tabindex="-1" role="dialog">
        <div className="modal-dialog" role="document">
            <div className="modal-content">
                <div className="modal-body p-0">
                    <div className="profileBox pt-2 pb-2">
                        <div className="image-wrapper">
                            <img src="/site/img/sample/avatar/avatar1.jpg" alt="image" className="imaged  w36"/>
                        </div>
                        <div className="in">
                            <strong>{ localStorage.getItem('name')}</strong>
                            <div className="text-muted">Client ID #000{ localStorage.getItem('userid')}</div>
                        </div>
                        <a href="#" className="btn btn-link btn-icon sidebar-close" data-bs-dismiss="modal">
                            <i className="close-outline"></i>
                        </a>
                    </div>
                    <div className="sidebar-balance">
                        <div className="listview-title">Balance</div>
                        <div className="in">
                            <h1 className="amount">₹{bal}</h1>
                        </div>
                    </div>
                    
                    <div className="listview-title mt-1">Menu</div>
                    <ul className="listview flush transparent no-line image-listview">
                        <li>
                            <a  data-bs-dismiss="modal" onClick={()=>navrto('profile')}  className="item">
                                <div className="icon-box bg-primary">
                                    <i className="fa fa-user"></i>
                                </div>
                                <div className="in">
                                    Manage Profile
                                </div>
                            </a>
                        </li>
                        <li>
                            <a  data-bs-dismiss="modal" onClick={()=>navrto('password')}  className="item">
                                <div className="icon-box bg-primary">
                                    <i className="fa fa-lock"></i>
                                </div>
                                <div className="in">
                                    Change Password
                                </div>
                            </a>
                        </li>
                        <li>
                        <a  data-bs-dismiss="modal" onClick={()=>navrto('bank')}  data-bs-dismiss="modal" className="item">
                                <div className="icon-box bg-primary">
                                    <i className="fa fa-building"></i>
                                </div>
                                <div className="in">
                                    Bank Details
                                </div>
                            </a>
                        </li>
                        <li>
                        <a  data-bs-dismiss="modal" onClick={()=>navrto('company')}  data-bs-dismiss="modal" className="item">
                                <div className="icon-box bg-primary">
                                    <i className="fa fa-building"></i>
                                </div>
                                <div className="in">
                                   About Company
                                </div>
                            </a>
                        </li>
                        <li>
                        <a  data-bs-dismiss="modal" onClick={()=>navrto('contact')}  className="item">
                                <div className="icon-box bg-primary">
                                    <i className="fa fa-comment"></i>
                                </div>
                                <div className="in">
                                    Contact us
                                </div>
                            </a>
                        </li>
                        <li>
                        <a  onClick={()=>logout2()} data-bs-dismiss="modal" className="item">
                                <div className="icon-box bg-primary">
                                    <i className="fa fa-sign-out"></i>
                                </div>
                                <div className="in">
                                    Log out
                                </div>
                            </a>
                        </li>
                    </ul>
                   
                </div>
            </div>
        </div>
                </div>

                <div className="appBottomMenu">
        <Link to="/dashboard" className="item">
            <div className="col">
                <i className='fa fa-home fa-2x'></i>
                <strong>Watchlist</strong>
            </div>
        </Link>
        <Link to="/orders" className="item">
            <div className="col">
                <i className='fa fa-list fa-2x'></i>
                <strong>My Orders</strong>
            </div>
        </Link>
        <Link to="/tradebook" className="item">
            <div className="col">
                <i className='fa fa-book fa-2x'></i>
                <strong>Tradebook</strong>
            </div>
        </Link>
        <Link to="/funds" className="item">
            <div className="col">
                <i className='fa fa-inr fa-2x'></i>
                <strong>Funds</strong>
            </div>
        </Link>
        <Link to="/settings" className="item">
            <div className="col">
                <i className='fa fa-cog fa-2x'></i>
                <strong>Settings</strong>
            </div>
        </Link>
    </div>
    </div>
  );
}
export default Frontend;
