import Box from '../UI/Box/Box';
import {connect} from 'react-redux';
import React from 'react';
import './DownloadProgress.css';

const mapStateToProps = state => {
  return {
    DownloadName: state.download.DownloadName,
    DownloadProgress: state.download.DownloadProgress,
  };
};

export default connect(mapStateToProps)(props => {
  return (
    <Box dxStyle={{width: '380px', height: 'auto', padding: '5px'}}>
      <div style={{width: '100%', height: 'auto'}}>
        <h1 style={{width: '100%', textAlign: 'center'}}>{'Downloading ' + props.DownloadName}</h1>
      </div>
      <progress max={100.0} id={'download_progress'}
                style={{width: '100%'}}
                value={props.DownloadProgress}/>
    </Box>);
});