content: // Libraries
  import Constants from '../libraries/constants';
  import FilesReducer from '../reducers/files-reducer';
  import FileUtils from '../libraries/file-utils';
  import React from 'react';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import {getDirectoryContents, sortByColumn} from '../actions/actions';
  
  // React Components
  import Table from 'material-ui/lib/table/table';
  import TableBody from 'material-ui/lib/table/table-body';
  import TableHeader from 'material-ui/lib/table/table-header';
  import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
  import TableRow from 'material-ui/lib/table/table-row';
  import TableRowColumn from 'material-ui/lib/table/table-row-column';
  
  // Module definition
  class FileTable extends React.Component {
  	constructor(props) {
  		super(props);
  
  		this.onColumnHeaderClick = this.onColumnHeaderClick.bind(this);
  
  		this.state = {
  			sortDirection: 'asc',
  			sortKey: 'fileName'
  		};
  	}
  
  	static get defaultProps() {
  		return {
  			columns: [
  				{key: 'fileName', label: 'Name'},
  				{key: 'dateModified', label: 'Date Modified'},
  				{key: 'fileSize', label: 'Size'},
  				{key: 'type', label: 'Type'}
  			],
  			listDirectoriesFirst: true
  		};
  	}
  
  	componentDidMount() {
  		this.props.getDirectoryContents('/');
  	}
  
  	componentWillReceiveProps(newProps) {
  		// this.sort(this.props.files);
  	}
  
  	getDirectoryContents(directoryName) {
  		if(directoryName === '..') {
  			// Navigate up a level instead of down a level
  			let newPath = this.props.files.path.split('/');
  			newPath.pop();
  			this.props.getDirectoryContents('/' + newPath.join('/'));
  			return;
  		}
  		this.props.getDirectoryContents(this.props.files.path + directoryName);
  	}
  
  	onColumnHeaderClick(clickEvent, rowNumber, columnNumber) {
  		let columnMeta = this.props.columns[columnNumber - 2];
  		let sortKey = columnMeta.key;
  		let sortDirection;
  		if(this.state.sortKey !== sortKey) {
  			sortDirection = 'asc';
  		} else {
  			if(this.state.sortDirection === 'asc') {
  				sortDirection = 'desc';
  			} else {
  				sortDirection = 'asc';
  			}
  		}
  
  		this.setState({sortDirection, sortKey});
  
  		this.props.sortByColumn(
  			this.props.files.sortedFiles,
  			this.props.files.path,
  			sortKey,
  			sortDirection
  		);
  	}
  
  	renderColumnHeaders() {
  		let sortIcon;
  		return this.props.columns.map((columnMeta) => {
  			let sortIcon;
  			if(this.state.sortKey === columnMeta.key) {
  				if(this.state.sortDirection === 'asc') {
  					sortIcon = ' (^)';
  				} else {
  					sortIcon = ' (v)';
  				}
  			}
  			
  			return <TableHeaderColumn key={columnMeta.key}>{columnMeta.label}{sortIcon}</TableHeaderColumn>
  		});
  	}
  
  	renderPreviousDirectory() {
  		if(this.props.files.path === '/') {
  			return;
  		}
  
  		return (
  			<TableRow key=".." onDoubleClick={this.getDirectoryContents.bind(this, '..')}>
  				<TableRowColumn>..</TableRowColumn>
  				<TableRowColumn>{Constants.NULL_COLUMN_DISPLAY_VALUE}</TableRowColumn>
  				<TableRowColumn>{Constants.NULL_COLUMN_DISPLAY_VALUE}</TableRowColumn>
  				<TableRowColumn>Directory</TableRowColumn>
  			</TableRow>
  		);
  	}
  
  	renderFileRows() {
  		if(!this.props.files.sortedFiles) {
  			return;
  		}
  
  		return this.props.files.sortedFiles.map((fileMeta, index) => {
  			let fileName = FileUtils.getBaseName(fileMeta.path);
  			let fileSizeWithUnits = FileUtils.getFileSizeWithUnits(fileMeta);
  			let type = fileMeta.type.charAt(0).toUpperCase() + fileMeta.type.slice(1);
  
  			return (
  				<TableRow key={fileMeta.path} onDoubleClick={fileMeta.type === 'directory' ? this.getDirectoryContents.bind(this, fileName) : null}>
  					<TableRowColumn>{fileName}</TableRowColumn>
  					<TableRowColumn>{fileMeta.dateModified}</TableRowColumn>
  					<TableRowColumn>{fileSizeWithUnits}</TableRowColumn>
  					<TableRowColumn>{type}</TableRowColumn>
  				</TableRow>
  			);
  		})
  	}
  
  	render() {
  console.log('PROPS', this.props)
  console.log('STATE',this.state)
  		return (
  			<Table multiSelectable={true}>
  				<TableHeader>
  					<TableRow onCellClick={this.onColumnHeaderClick}>{this.renderColumnHeaders()}</TableRow>
  				</TableHeader>
  				<TableBody>
  					{this.renderPreviousDirectory()}
  					{this.renderFileRows()}
  				</TableBody>
  			</Table>
  		);
  	}
  };
  
  function mapStateToProps(state) {
  // window.reduxState = state;
  	return {files: state.files};
  }
  
  function mapDispatchToProps(dispatch) {
  	return bindActionCreators({getDirectoryContents, sortByColumn}, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(FileTable);