import React, { useState, useEffect, useContext } from "react";

import { Typography, Skeleton, Row } from 'antd';

import { GlobalContext } from './../../lib/';

import { Dashboard } from './../../models/'

import { DashboardCard } from './../../modules/'

import { NoticeBoard ,Card} from './../../lib/';

// import { Spotlight } from '../../components/spotlight-search/spotlight-search.component';

import './homepage-api.scss';

const { Title } = Typography;

export default function HomePage({ config, steps }) {

    const { user = {} } = useContext(GlobalContext);

    const [loading, setLoading] = useState(false);

    const [list, setList] = useState([]);

    useEffect(() => {
        if (user) {
            getDashboard(); //Patiant list get function
        }
    }, [user]);


    //PatiantData fetching function
    async function getDashboard() {

        setLoading(true);
        //Cheacking if there is a specific role assigned to the user,
        //If no role assigned the user_group will contain a result variable which returns no user found , else it will contain only user_group data
        if (!user.user_group.result) {

            Dashboard.loadDashboards(user).then((response) => {

                let apiResponse = {};

                // @todo When the reporting tool is build , we have to consider all of these
                if (response.result && response.result.length) {

                    apiResponse = response.result;

                } else if (response && response.length) {

                    apiResponse = response;

                }

                setList(apiResponse);

                setLoading(false);
            });

        }
    }




    return (

        <Card className="homepage">

            {/* <NoticeBoard /> */}

            {/* <br /> */}

            {/* <div><Spotlight user={user} /></div> */}

            {/* <Divider plain></Divider> */}


            {/* {list.length ? (
                <> */}
            <Card className="homepage-dashboard">
                {/* <Title style={{ marginBottom: '0px' }} level={3}>
                            Overview
                        </Title> */}

                {/* <BarGraph className="graph-element" data={[]} /> */}

                <Card className="dashboard-cards">
                    {list.length ? (
                        <>
                            {loading ? (
                                <Skeleton active />
                            ) : (
                                <>
                                    <Row gutter={20}>
                                        {list
                                            // Sort in ascending asc of id
                                            .sort((a, b) => a.slno - b.slno)
                                            .map((entry,key) => (
                                                <DashboardCard key={key} record={entry} />
                                            ))}
                                    </Row>
                                </>
                            )}
                        </>

                    ) : <div className="nodata">
                        <p></p>
                    </div>}
                </Card>
            </Card>
        </Card>
    );
}
