import React from 'react';
import './ReleaseVersionDisplay.css';
import * as Constants from '../../constants';
import {connect} from 'react-redux';
import DropDown from '../UI/DropDown/DropDown';
import Grid from '../UI/Grid/Grid';
import Text from '../UI/Text/Text';
import Button from '../UI/Button/Button';
import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
import {setActiveRelease} from "../../redux/actions/release_version_actions";

const mapStateToProps = state => {
  return {
    AppPlatform: state.common.AppPlatform,
    DownloadActive: state.download.DownloadActive,
    InstallActive: state.install.InstallActive,
    InstallType: state.install.InstallType,
    InstalledVersion: state.relver.InstalledVersion,
    MountsBusy: state.mounts.MountsBusy,
    Release: state.relver.Release,
    ReleaseUpgradeAvailable: state.relver.ReleaseUpgradeAvailable,
    ReleaseVersion: state.relver.Version,
    VersionLookup: state.relver.VersionLookup,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setActiveRelease: (release, version) => dispatch(setActiveRelease(release, version)),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(props => {
  const handleReleaseChanged = e => {
    const release = parseInt(e.target.value, 10);
    const releaseVersion = props.VersionLookup[Constants.RELEASE_TYPES[release]].length - 1;
    props.setActiveRelease(release, releaseVersion);
  };

  const handleVersionChanged = e => {
    props.setActiveRelease(props.Release, parseInt(e.target.value, 10));
  };

  const text = props.InstalledVersion + ' [' + props.AppPlatform + ']';
  const disabled = props.DownloadActive || props.InstallActive || props.MountsBusy;
  const releaseExtracting = (props.InstallType === Constants.INSTALL_TYPES.Release);

  let optionsDisplay = [];
  let key = 0;
  if (releaseExtracting) {
    optionsDisplay.push((
      <Text col={dimensions => (dimensions.columns / 3) * 2}
            colSpan={'remain'}
            key={key++}
            rowSpan={4}
            text={'Activating'}
            textAlign={'left'}
            type={'Heading2'}/>
    ));
    optionsDisplay.push((
      <Text col={dimensions => (dimensions.columns / 3) * 2}
            colSpan={'remain'}
            key={key++}
            row={5}
            rowSpan={7}
            text={text}
            textAlign={'left'}/>
    ));
  } else if (props.downloadDisabled) {
    optionsDisplay.push((
      <Text col={dimensions => (dimensions.columns / 3) * 2}
            colSpan={'remain'}
            key={key++}
            rowSpan={4}
            text={'Installed'}
            textAlign={'left'}
            type={'Heading2'}/>
      ));

    optionsDisplay.push((
      <Text col={dimensions => (dimensions.columns / 3) * 2}
            colSpan={'remain'}
            key={key++}
            row={5}
            rowSpan={7}
            text={text}
            textAlign={'left'}/>
    ));
  } else {
    optionsDisplay.push((
      <Button clicked={props.downloadClicked}
              col={dimensions => (dimensions.columns / 3) * 2}
              colSpan={20}
              key={key++}
              disabled={props.downloadDisabled}
              row={5}
              rowSpan={7}>Install</Button>
    ));
  }

  return (
    <Grid>
      <Text colSpan={columns=>columns / 3}
            rowSpan={4}
            text={'Release'}
            textAlign={'left'}
            type={'Heading2'}/>
      <DropDown changed={handleReleaseChanged}
                colSpan={remain=>remain / 3 - 1}
                disabled={disabled}
                items={Constants.RELEASE_TYPES}
                row={5}
                rowSpan={7}
                selected={props.Release}/>
      <Text col={dimensions => dimensions.columns / 3}
            colSpan={remain=>remain / 2}
            rowSpan={4}
            text={'Version'}
            textAlign={'left'}
            type={'Heading2'}/>
      <UpgradeIcon available={props.ReleaseUpgradeAvailable}
                   col={dimensions => ((dimensions.columns / 3) * 2) - 6}
                   colSpan={4}
                   release
                   rowSpan={4}/>
      <DropDown changed={handleVersionChanged}
                col={dimensions => dimensions.columns / 3}
                colSpan={remain=>remain / 2 - 1}
                disabled={disabled}
                items={props.VersionLookup[Constants.RELEASE_TYPES[props.Release]]}
                row={5}
                rowSpan={7}
                selected={props.ReleaseVersion}/>
      {optionsDisplay}
    </Grid>
  );
});