import {connect} from 'react-redux';
import Button from '../UI/Button/Button';
import Box from '../UI/Box/Box';
import * as Constants from '../../constants';
import React from 'react';
import './UpgradeUI.css';
import {setDismissUIUpgrade} from '../../redux/actions/release_version_actions';
import {downloadItem} from '../../redux/actions/download_actions';

const mapStateToProps = state => {
  return {
    Platform: state.common.Platform,
    UpgradeData: state.relver.UpgradeData,
    UpgradeVersion: state.relver.UpgradeVersion,
  }
};

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

export default connect(mapStateToProps, mapDispatchToProps)(props => {
  const handleDownload = () => {
    const name = (props.Platform === 'win32') ?
      'upgrade.exe' :
      (props.Platform === 'darwin') ?
        'upgrade.dmg' :
        'repertory-ui_' + props.UpgradeVersion + '_linux_x86_64.AppImage';
    props.downloadItem(name, Constants.INSTALL_TYPES.Upgrade, props.UpgradeData.urls);
  };

  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={handleDownload}>Install</Button>
            </td>
            <td width="50%">
              <Button buttonStyles={{width: '100%'}}
                      clicked={() => props.setDismissUIUpgrade(true)}>Cancel</Button>
            </td>
          </tr>
        </tbody>
      </table>
    </Box>);
});