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

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

import { GlobalContext } from 'soxo-firebase-core';

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

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

import { NoticeBoard } from 'soxo-firebase-core';

// 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);

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

            let apiResponse = {};

            console.log(response);

            // @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 (

        <span className="homepage">

            <NoticeBoard />

            <br />

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

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


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

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

                        <div className="dashboard-cards">
                            {loading ? (
                                <Skeleton active />
                            ) : (
                                <>
                                    <Row gutter={20}>
                                        {list.map((entry, key) => (
                                            <DashboardCard key={key} record={entry} />
                                        ))}
                                    </Row>
                                </>
                            )}
                        </div>
                    </div>
                </>
            ) : null}


        </span>
    );
}
