import React from 'react';
import './DependencyList.css';
import * as Constants from '../../constants';
import Box from '../UI/Box/Box';
import Dependency from './Dependency/Dependency';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createDismissDisplay } from '../../utils.jsx';
import { downloadItem } from '../../redux/actions/download_actions';
import { extractFileNameFromURL } from '../../utils.jsx';
import { setDismissDependencies } from '../../redux/actions/install_actions';

const DependencyList = (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,
            k.is_winfsp
          )
        }
      />
    );
  });

  return (
    <Box dxStyle={{ width: '300px', height: 'auto', padding: '5px' }}>
      {createDismissDisplay(
        () => props.setDismissDependencies(true),
        !props.AllowDismissDependencies
      )}
      <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>
  );
};

const mapStateToProps = (state) => {
  return {
    AllowDismissDependencies: state.relver.AllowDismissDependencies,
    MissingDependencies: state.install.MissingDependencies,
  };
};

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

DependencyList.propTypes = {
  AllowDismissDependencies: PropTypes.bool,
  MissingDependencies: PropTypes.array,
  downloadItem: PropTypes.func.isRequired,
  setDismissDependencies: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(DependencyList);