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

const mapStateToProps = state => {
  return {
    MissingDependencies: state.install.MissingDependencies,
  };
};

export default connect(mapStateToProps)(props => {
  const items = props.MissingDependencies.map((k, i)=> {
    return (
      <Dependency download={k.download}
                  key={i}
                  name={k.display}
                  onDownload={props.onDownload}/>
    );
  });

  return (
    <Box dxStyle={{width: '300px', height: 'auto', padding: '5px'}}>
      <div style={{width: '100%', height: 'auto', paddingBottom: '5px', boxSizing: 'border-box'}}>
        <h1 style={{width: '100%', textAlign: 'center'}}>Missing Dependencies</h1>
      </div>
      {items}
    </Box>
  );
});