import React from 'react';
import './ReleaseVersionDisplay.css';
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';

export default props => {
  let optionsDisplay = [];
  let key = 0;
  if (props.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={props.installedVersion}
            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={props.installedVersion}
            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={props.releaseChanged}
                colSpan={remain=>remain / 3 - 1}
                disabled={props.disabled}
                items={props.releaseTypes}
                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.versionAvailable}
                   col={dimensions => ((dimensions.columns / 3) * 2) - 6}
                   colSpan={4}
                   release
                   rowSpan={4}/>
      <DropDown changed={props.versionChanged}
                col={dimensions => dimensions.columns / 3}
                colSpan={remain=>remain / 2 - 1}
                disabled={props.disabled}
                items={props.versions}
                row={5}
                rowSpan={7}
                selected={props.version}/>
      {optionsDisplay}
    </Grid>
  );
};