import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { LinearProgress } from 'material-ui/Progress';

import { createStore, applyMiddleware, compose } from 'redux'
import { connect } from 'react-redux'

const styles = {
    root: {
        flexGrow: 1,
        width: "100%",
        position: "fixed",
        zIndex: "999",
    },
};

class LinearIndeterminate extends  React.Component{
    constructor() {
        super();
    }

    render() {
        this.state = {
            showForm: this.props.progressStatus
        }
        console.log('work progress bar');
        console.log(this.props.progressStatus);
        const {classes} = this.props;
        const showHide = {
            'display': this.state.showForm ? 'block' : 'none'
        };

        const showReplyForm = () => {
            this.setState({showForm: true});
        };
        return (
            <div className={classes.root} style={showHide}>
                <LinearProgress color="secondary"/>
            </div>
        );
    }
}

LinearIndeterminate.propTypes = {
    classes: PropTypes.object.isRequired,
};
function mapStateToProps(state) {
    return{
        progressStatus: state.progressStatus
    };
}
export default compose(
    withStyles(styles),
    connect(mapStateToProps),
)
(LinearIndeterminate);