import React from 'react';
import {connect} from 'react-redux';
import Box from '../UI/Box/Box';
import Button from '../UI/Button/Button';
import NewRelease from './NewRelease/NewRelease';
import './NewReleases.css';
import {setDismissNewReleasesAvailable} from '../../redux/actions/release_version_actions';

const mapStateToProps = state => {
  return {
    NewReleasesAvailable: state.relver.NewReleasesAvailable,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    dismissNewReleasesAvailable: () => dispatch(setDismissNewReleasesAvailable(true)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(props => {
  const newReleases = props.NewReleasesAvailable.map((i, idx) => {
    return <NewRelease dismiss={props.dismissNewReleasesAvailable}
                       key={'new_release_' + i.Release + '_' + i.Version}
                       lastItem={idx === (props.NewReleasesAvailable.length - 1)}
                       release={i} />;
  });

  return (
    <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
      <h1 className={'NewReleasesHeading'}>New Repertory Versions Available</h1>
      <div className={'NewReleasesContent'}>
        {newReleases}
      </div>
      <Button clicked={props.dismissNewReleasesAvailable}>Dismiss</Button>
    </Box>
  );
});
