import React from 'react';
import './Dependency.css';
import * as Constants from '../../../constants';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';

const Dependency = (props) => {
  return (
    <div className={'Dependency'}>
      <table width="100%">
        <tbody>
        <tr>
          <td width="35%">
            <h3>{props.name}</h3>
          </td>
          <td>
            {props.AllowDownload ? (
              <a
                href={'#'}
                className={'DependencyLink'}
                onClick={() => {
                  props.onDownload();
                  return false;
                }}>
                <u>Install</u>
              </a>
            ) : (
              'Installing...'
            )}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    AllowDownload:
      state.download.DownloadType !== Constants.INSTALL_TYPES.Dependency &&
      !state.download.DownloadActive &&
      !state.install.InstallActive,
  };
};

Dependency.propTypes = {
  AllowDownload: PropTypes.bool,
  name: PropTypes.string.isRequired,
  onDownload: PropTypes.func.isRequired,
};

export default connect(mapStateToProps)(Dependency);