import React from 'react';
import './DependencyList.css';
import {connect} from 'react-redux';
import * as Constants from '../../constants';
import Dependency from './Dependency/Dependency';
import Box from '../UI/Box/Box';
import {downloadItem} from '../../redux/actions/download_actions';
import {extractFileNameFromURL} from '../../utils';

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

const mapDispatchToProps = (dispatch) => {
  return {
    downloadItem: (name, type, url) => dispatch(downloadItem(name, type, url))
  };
};

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

  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', color: 'var(--text_color_error)'}}>Missing Dependencies</h1>
      </div>
      {items}
    </Box>
  );
});