import React from 'react';
import useDeepCompareEffect from 'use-deep-compare-effect';
import { CircularProgress } from '@material-ui/core';
import styleConstants from '../../styleConstants';
import appConstants from '../../appConstants';

export default ({ renderData, path, requestData, dataChangeTracker }) => {
    const [loadState, setLoadState] = React.useState('loading');
    const [data, setData] = React.useState(null);

    useDeepCompareEffect(() => {
        setLoadState('loading');

        appConstants.connector[path](...requestData)
            .then((data) => {
                setData(data);
                setLoadState('loaded');
            })
            .catch((e) => {
                console.log(e);
                setLoadState('error');
            });
    }, [path, requestData, dataChangeTracker]);

    switch (loadState) {
        case 'loading':
            return (
                <div css={{ ...styleConstants.centered, width: '100%', height: '100%', color: '#c62828' }}>
                    <CircularProgress />
                </div>
            );
        case 'loaded':
            return renderData(data);
        default:
            return (
                <div css={{ ...styleConstants.centered, width: '100%', height: '100%', color: '#c62828' }}>
                    <span>Error happened during data loading</span>
                </div>
            );
    }
};