import React, { PropTypes, Component } from 'react';
import { Table, TableHeader, TableHeaderColumn, TableRow }
    from 'material-ui/Table';
import RaisedButton from 'material-ui/RaisedButton';
import CloudDownload from 'material-ui/svg-icons/file/cloud-download';
import ProviderRow from './ProviderRow';

export class DataPackDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedProviders: {},
        };
    }

    componentDidMount() {
        const selectedProviders = {};
        this.props.providerTasks.forEach((provider) => {
            if (provider.display === true) {
                selectedProviders[provider.uid] = false;
            }
        });
        this.setState({ selectedProviders });
    }

    getCloudDownloadIcon() {
        if (this.props.zipFileProp === null) {
            return (
                <CloudDownload
                    className="qa-DataPackDetails-CloudDownload-disabled"
                    style={{ fill: 'gray', verticalAlign: 'middle' }}
                />
            );
        }
        return (
            <CloudDownload
                className="qa-DataPackDetails-CloudDownload-enabled"
                style={{ fill: '#4598bf', verticalAlign: 'middle' }}
            />
        );
    }

    getTextFontSize() {
        if (window.innerWidth <= 575) {
            return '10px';
        } else if (window.innerWidth <= 767) {
            return '11px';
        } else if (window.innerWidth <= 991) {
            return '12px';
        } else if (window.innerWidth <= 1199) {
            return '13px';
        }
        return '14px';
    }

    getTableCellWidth() {
        if (window.innerWidth <= 767) {
            return '80px';
        }
        return '120px';
    }

    getToggleCellWidth() {
        return '70px';
    }

    isZipFileCompleted() {
        if (this.props.zipFileProp === null) {
            return true;
        }
        return false;
    }

    render() {
        const tableCellWidth = this.getTableCellWidth();
        const toggleCellWidth = this.getToggleCellWidth();
        const textFontSize = this.getTextFontSize();

        const providers = this.props.providerTasks.filter((provider) => {
            return provider.display !== false;
        });

        const styles = {
            subHeading: {
                fontSize: '16px',
                fontWeight: 'bold',
                color: 'black',
                alignContent: 'flex-start',
                paddingBottom: '5px',
            },
            download: {
                paddingRight: '12px',
                paddingLeft: '0px',
                fontSize: textFontSize,
                whiteSpace: 'normal',
            },
            genericColumn: {
                paddingRight: '0px',
                paddingLeft: '0px',
                width: tableCellWidth,
                textAlign: 'center',
                fontSize: textFontSize,
            },
        };

        return (
            <div>
                <div className="qa-DataPackDetails-heading" style={styles.subHeading}>
                   Download Options
                </div>
                <Table
                    className="qa-DataPackDetails-Table"
                    style={{ width: '100%', tableLayout: 'fixed' }}
                    selectable={false}
                >
                    <TableHeader
                        className="qa-DataPackDetails-TableHeader"
                        displaySelectAll={false}
                        adjustForCheckbox={false}
                        enableSelectAll={false}
                    >
                        <TableRow className="qa-DataPackDetails-TableRow">
                            <TableHeaderColumn
                                className="qa-DataPackDetails-TableHeaderColumn-zipButton"
                                style={styles.download}
                            >
                                <a href={this.props.zipFileProp}>
                                    <RaisedButton
                                        id="CompleteDownload"
                                        className="qa-DataPackDetails-RaisedButton-zipButton"
                                        backgroundColor="rgba(179,205,224,0.5)"
                                        disabled={this.isZipFileCompleted()}
                                        disableTouchRipple
                                        labelColor="#4598bf"
                                        labelStyle={{ fontWeight: 'bold', fontSize: textFontSize }}
                                        label={this.props.zipFileProp ? 'DOWNLOAD DATAPACK (.ZIP)' : 'CREATING DATAPACK ZIP'}
                                        icon={this.getCloudDownloadIcon()}
                                    />
                                </a>
                            </TableHeaderColumn>
                            <TableHeaderColumn
                                className="qa-DataPackDetails-TableHeaderColumn-fileSize"
                                style={styles.genericColumn}
                            >
                                FILE SIZE
                            </TableHeaderColumn>
                            <TableHeaderColumn
                                className="qa-DataPackDetails-TableHeaderColumn-progress"
                                style={styles.genericColumn}
                            >
                                PROGRESS
                            </TableHeaderColumn>
                            <TableHeaderColumn
                                className="qa-DataPackDetails-TableHeaderColumn-empty"
                                style={{ ...styles.genericColumn, width: toggleCellWidth }}
                            />
                        </TableRow>
                    </TableHeader>
                </Table>
                <div className="qa-DataPackDetails-providers" id="Providers">
                    {providers.map((provider, ix) => (
                        <ProviderRow
                            backgroundColor={ix % 2 === 0 ? 'whitesmoke' : 'white'}
                            key={provider.uid}
                            onSelectionToggle={this.onSelectionToggle}
                            onProviderCancel={this.props.onProviderCancel}
                            updateSelectionNumber={this.updateSelectionNumber}
                            provider={provider}
                            selectedProviders={this.state.selectedProviders}
                            providers={this.props.providers}
                        />
                    ))}
                </div>
            </div>
        );
    }
}

DataPackDetails.propTypes = {
    providerTasks: PropTypes.arrayOf(PropTypes.object).isRequired,
    onProviderCancel: PropTypes.func.isRequired,
    providers: PropTypes.array.isRequired,
    zipFileProp: PropTypes.string,
};

export default DataPackDetails;

@@ -808,32 +808,33 @@
 ) %7B%0A        if (
+!
 this.props.zipFi
@@ -835,33 +835,24 @@
 .zipFileProp
- === null
 ) %7B%0A        
@@ -1007,17 +1007,17 @@
 ill: 'gr
-a
+e
 y', vert
@@ -1882,16 +1882,17 @@
     if (
+!
 this.pro
@@ -1909,17 +1909,8 @@
 Prop
- === null
 ) %7B%0A
@@ -1928,19 +1928,20 @@
  return 
-tru
+fals
 e;%0A     
@@ -1956,28 +1956,27 @@
      return 
-fals
+tru
 e;%0A    %7D%0A%0A  
@@ -3969,40 +3969,20 @@
    %3C
-a href=%7Bthis.props.zipFileProp%7D%3E
+RaisedButton
 %0A   
@@ -4010,37 +4010,45 @@
             
-%3CRaisedButton
+id=%22CompleteDownload%22
 %0A           
@@ -4076,38 +4076,38 @@
     
-    id=%22CompleteDownload%22%0A    
+href=%7Bthis.props.zipFileProp%7D%0A
     
@@ -4220,36 +4220,32 @@
                 
-    
 backgroundColor=
@@ -4300,28 +4300,24 @@
             
- 
-   
 disabled=%7Bth
@@ -4314,16 +4314,17 @@
 sabled=%7B
+!
 this.isZ
@@ -4374,28 +4374,24 @@
             
-    
 disableTouch
@@ -4429,28 +4429,24 @@
             
-   
- 
 labelColor=%22
@@ -4454,20 +4454,16 @@
 4598bf%22%0A
-    
         
@@ -4582,28 +4582,24 @@
             
-    
 label=%7Bthis.
@@ -4708,20 +4708,16 @@
         
-  
-  
 icon=%7Bth
@@ -4779,50 +4779,9 @@
     
-    /%3E%0A                                %3C/a
+/
 %3E%0A  

Fix logic error causing button always enabled