import { ReactNode } from 'react';
//import React from 'react';
import PropTypes from 'prop-types';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'admin-lte/dist/css/adminlte.min.css';
import 'font-awesome/css/font-awesome.min.css';
/*import 'ionicons/dist/css/ionicons.min.css';*/

import 'bootstrap/dist/js/bootstrap.bundle.min.js'; // Bootstrap JS
import 'admin-lte/dist/js/adminlte.min.js';

const Layout = function Layout({ children }: { children: ReactNode }) {
    return (
            <div className="wrapper" style={{ overflow: 'initial' }}>
                    <link rel="stylesheet" href="/content/dist/css/skins/_all-skins.min.css" />
                    <link href="/content/plugins/datepicker/v4/bootstrap-datetimepicker.css" rel="stylesheet" />
                    <link rel="stylesheet" href="/content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" />
                    <link rel="stylesheet" href="/content/plugins/datatables/dataTables.bootstrap.css" />

                    {/*<script src="/content/dist/js/app.min.js"></script>AdminLTE?*/}
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
                    {/*<script src="/content/plugins/datatables/jquery.dataTables.min.js"></script>*/}
                    {/*<script src="/content/plugins/validator/validator.js"></script>*/}
                    <script src="/content/js/jquery.surge365.utilities-1.0.js" />
                    <script src="/content/js/jquery.surge365.global.js?36"></script>
                    <script src="/content/js/jquery.surge365.webmethods-1.0.js?15"></script>
                    <script src="/content/js/Main-1.0.js?39"></script>
                    {/*<script src="/content/plugins/growl/jquery.bootstrap-growl.min.js"></script>*/}
                    {/*<script src="/content/plugins/input-mask-5/jquery.inputmask.js"></script>*/}
                    {/*<script src="/content/plugins/printThis/printThis.js"></script>*/}
                    {/*<script src="/content/plugins/datatables/dataTables.bootstrap.min.js"></script>*/}
                <header className="main-header">
                    <a href="Dashboard" className="logo" style={{ backgroundColor: '#333' }}>
                        <span className="logo-mini" style={{ backgroundColor: '#333' }}>
                            <img id="imgLogo-sm" src="/content/img/imove_mini_logo.png" style={{ height: '35px', marginBottom: '3px' }} alt="Logo" className="hide" />
                        </span>
                        <span className="logo-lg" style={{ textAlign: 'center', backgroundColor: '#333' }}>
                            <img id="imgLogo-lg" src="/content/img/imove_mini_logo.png" style={{ height: '35px', marginBottom: '3px' }} alt="Logo" className="hide" />
                            <span style={{ marginLeft: '5px', verticalAlign: 'middle' }}><b>USA</b>Haulers</span>
                        </span>
                    </a>
                    <nav className="navbar navbar-static-top">
                        <a href="#" className="fa5 sidebar-toggle" data-toggle="offcanvas" role="button">
                            <span className="sr-only">Toggle navigation</span>
                        </a>
                        <div className="navbar-custom-menu">
                            <ul className="nav navbar-nav">
                                <li className="dropdown user user-menu">
                                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                                        <span id="spanSpinner" className="fa fa-sync-alt pull-left" style={{ lineHeight: 'unset', display: 'none', fontSize: '16pt', fontWeight: 'bold', marginRight: '10px' }}></span>
                                        <img id="imgRightProfile" src="/content/img/generic_avatar.jpg" className="user-image" alt="User Image" />
                                        <span id="spanProfileName"></span>
                                    </a>
                                    <ul className="dropdown-menu">
                                        <li className="user-header">
                                            <img id="imgMainProfile" src="" className="img-circle" alt="User Image" />
                                            <p>
                                                <span id="spanProfileNameTitle"></span>
                                            </p>
                                        </li>
                                        <li className="user-footer">
                                            <div className="pull-left">
                                                <a href="Profile" className="btn btn-default btn-flat">Profile</a>
                                            </div>
                                            <div className="pull-right">
                                                <input type="button" id="btnSignOut" className="btn btn-primary" value="Sign Out" />
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </header>

                <aside className="main-sidebar">
                    <section className="sidebar">
                        <div className="user-panel">
                            <div className="pull-left image">
                                <img id="imgLeftProfile" src="/content/img/generic_avatar.jpg" className="img-circle" alt="User Image" />
                            </div>
                            <div className="pull-left info" style={{ lineHeight: 3 }}>
                                <p><span id="spanMenuName"></span></p>
                            </div>
                        </div>
                        <ul className="sidebar-menu">
                            <li className="header">MAIN NAVIGATION</li>
                            <li id="liDashboard" className="active treeview">
                                <a href="Dashboard">
                                    <i className="fa fa-home"></i><span>Dashboard</span>
                                </a>
                            </li>
                            <li className="treeview">
                                <a href="#" id="aSignOut">
                                    <i className="fa fa-times-circle"></i>
                                    <span>Logout</span>
                                </a>
                            </li>
                        </ul>
                    </section>
                </aside>

                {children}

                <footer className="main-footer" style={{ padding: '2px' }}>
                    <div className="pull-right hidden-xs">
                        <b>Version</b> 1.0.0
                    </div>
                    <strong>Copyright &copy; 2024 <a href="https://www.surge365.com">Surge365</a>.</strong> All rights reserved.
                </footer>
            </div>
    );
}

Layout.propTypes = {
    children: PropTypes.any
};

export default Layout;