import {connect} from 'react-redux';
import Button from '../UI/Button/Button';
import Box from '../UI/Box/Box';
import React from 'react';
import './UpgradeUI.css';
import {setDismissUIUpgrade} from '../../redux/actions/release_version_actions';

const mapDispatchToProps = dispatch => {
  return {
    setDismissUIUpgrade: dismiss => dispatch(setDismissUIUpgrade(dismiss)),
  };
};

export default connect(null, mapDispatchToProps)(props => {
  return (
    <Box dxStyle={{width: '180px', height: 'auto', padding: '5px'}}>
      <div style={{width: '100%', height: 'auto'}}>
        <h1 style={{width: '100%', textAlign: 'center'}}>UI Upgrade Available</h1>
      </div>
      <table cellSpacing={5} width="100%">
        <tbody>
          <tr>
            <td width="50%">
              <Button buttonStyles={{width: '100%'}}
                      clicked={props.upgrade}>Install</Button>
            </td>
            <td width="50%">
              <Button buttonStyles={{width: '100%'}}
                      clicked={() => props.setDismissUIUpgrade(true)}>Cancel</Button>
            </td>
          </tr>
        </tbody>
      </table>
    </Box>);
});