import React, { useEffect } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import RecentActions from "./RecentActions";
import Products from "./Products";
import TopBar from "./TopBar";
import ProductsURL from "./ProductsURL";
import { SocketContextValues } from "../context/SocketIOContext";

export default function HomeSections(){

    const {sendMessage} = SocketContextValues() // Destructures values from socket context

    // useEffect(()=>{
    //     sendMessage('Hello socket', '2020aklksod')
    // },[])

    return <>
        {/* <div className="row">
            <div className="col-md-12 m-b-30">
                <div className="d-block d-sm-flex flex-nowrap align-items-center">
                    <div className="page-title mb-2 mb-sm-0">
                        <h1>The Practice Name Shows Up Here </h1>
                    </div>
                    <div className="ml-auto d-flex align-items-center">
                        <nav>
                            <ol className="breadcrumb p-0 m-b-0">
                                <li className="breadcrumb-item">
                                    <a href="/dash"><i className="ti ti-home"></i></a>
                                </li>
                                <li className="breadcrumb-item">
                                    Dashboard
                                </li>
                                <li className="breadcrumb-item active text-primary" aria-current="page">Home</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div> */}
        <BreadcrumbComBS title='Home' paths={['Dashboard', 'Home']} />
        <div className="row">
            <TopBar />
        </div>
        <div className="row">
            <div className="col-xxl-6 m-b-30">
                <Products />
            </div>
            <div className="col-xxl-6 m-b-30">
                <RecentActions />
            </div>
        </div>
        <div className="row">
            <ProductsURL />

            <div className="col-xxl-4 m-b-30">
                <div className="card card-statistics h-100 mb-0 panel_round_c3">
                    <div className="card-header d-flex justify-content-between">
                        <div className="card-heading">
                            <h4 className="card-title">Payments</h4>
                        </div>
                        {/*<div className="dropdown">*/}
                        {/*    <a className="p-2" href="#!" data-toggle="dropdown" aria-haspopup="true"*/}
                        {/*       aria-expanded="false">*/}
                        {/*        <i className="fe fe-circle"></i>*/}
                        {/*    </a>*/}
                        {/*    <div className="dropdown-menu custom-dropdown dropdown-menu-right p-4">*/}
                        {/*        <h6 className="mb-1">Action</h6>*/}
                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-o pr-2"></i>View*/}
                        {/*            reports</a>*/}
                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-edit pr-2"></i>Edit reports</a>*/}
                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-bar-chart-o pr-2"></i>Statistics</a>*/}
                        {/*        <h6 className="mb-1 mt-3">Export</h6>*/}
                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-pdf-o pr-2"></i>Export*/}
                        {/*            to PDF</a>*/}
                        {/*        <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-excel-o pr-2"></i>Export*/}
                        {/*            to CSV</a>*/}
                        {/*    </div>*/}
                        {/*</div>*/}
                    </div>
                    <div className="card-body">
                        {/*<h5>We only started collecting data from February 2019 </h5>*/}
                        {/*<p>Questions about the Net Earnings number? <a*/}
                        {/*    className="btn btn-square btn-inverse-success btn-xs ml-1" href="#">Click here</a></p>*/}
                        <div className="row mt-4">
                            .
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </>;

}