content: import Field from '../Field';
  import React from 'react';
  import { Button, FormField, FormInput, FormNote } from 'elemental';
  
  module.exports = Field.create({
  
  	shouldCollapse () {
  		return this.props.collapse && !this.hasExisting();
  	},
  
  	fileFieldNode () {
  		return this.refs.fileField.getDOMNode();
  	},
  
  	changeFile () {
  		this.refs.fileField.getDOMNode().click();
  	},
  
  	getFileSource () {
  		if (this.hasLocal()) {
  			return this.state.localSource;
  		} else if (this.hasExisting()) {
  			return this.props.value.url;
  		} else {
  			return null;
  		}
  	},
  
  	getFileURL () {
  		if (!this.hasLocal() && this.hasExisting()) {
  			return this.props.value.url;
  		}
  	},
  
  	undoRemove () {
  		this.fileFieldNode().value = '';
  		this.setState({
  			removeExisting: false,
  			localSource:    null,
  			origin:         false,
  			action:         null
  		});
  	},
  
  	fileChanged  (event) {//eslint-disable-line no-unused-vars
  		this.setState({
  			origin: 'local'
  		});
  	},
  
  	removeFile  (e) {
  		var state = {
  			localSource: null,
  			origin: false
  		};
  
  		if (this.hasLocal()) {
  			this.fileFieldNode().value = '';
  		} else if (this.hasExisting()) {
  			state.removeExisting = true;
  
  			if (this.props.autoCleanup) {
  				if (e.altKey) {
  					state.action = 'reset';
  				} else {
  					state.action = 'delete';
  				}
  			} else {
  				if (e.altKey) {
  					state.action = 'delete';
  				} else {
  					state.action = 'reset';
  				}
  			}
  		}
  
  		this.setState(state);
  	},
  
  	hasLocal () {
  		return this.state.origin === 'local';
  	},
  
  	hasFile () {
  		return this.hasExisting() || this.hasLocal();
  	},
  
  	hasExisting () {
  		return !!this.props.value.filename;
  	},
  
  	getFilename () {
  		if (this.hasLocal()) {
  			return this.fileFieldNode().value.split('\\').pop();
  		} else {
  			return this.props.value.filename;
  		}
  	},
  
  	renderFileDetails  (add) {
  		var values = null;
  
  		if (this.hasFile() && !this.state.removeExisting) {
  			values = (
  				<div className='file-values'>
  					<FormInput noedit>{this.getFilename()}</FormInput>
  				</div>
  			);
  		}
  
  		return (
  			<div key={this.props.path + '_details'} className='file-details'>
  				{values}
  				{add}
  			</div>
  		);
  	},
  
  	renderAlert () {
  		if (this.hasLocal()) {
  			return (
  				<div className="file-values upload-queued">
  					<FormInput noedit>File selected - save to upload</FormInput>
  				</div>
  			);
  		} else if (this.state.origin === 'cloudinary') {
  			return (
  				<div className="file-values select-queued">
  					<FormInput noedit>File selected from Cloudinary</FormInput>
  				</div>
  			);
  		} else if (this.state.removeExisting) {
  			return (
  				<div className="file-values delete-queued">
  					<FormInput noedit>File {this.props.autoCleanup ? 'deleted' : 'removed'} - save to confirm</FormInput>
  				</div>
  			);
  		} else {
  			return null;
  		}
  	},
  
  	renderClearButton () {
  		if (this.state.removeExisting) {
  			return (
  				<Button type="link" onClick={this.undoRemove}>
  					Undo Remove
  				</Button>
  			);
  		} else {
  			var clearText;
  			if (this.hasLocal()) {
  				clearText = 'Cancel Upload';
  			} else {
  				clearText = (this.props.autoCleanup ? 'Delete File' : 'Remove File');
  			}
  			return (
  				<Button type="link-cancel" onClick={this.removeFile}>
  					{clearText}
  				</Button>
  			);
  		}
  	},
  
  	renderFileField () {
  		if (!this.shouldRenderField()) return null;
  
  		return <input ref="fileField" type="file" name={this.props.paths.upload} className="field-upload" onChange={this.fileChanged} tabIndex="-1" />;
  	},
  
  	renderFileAction () {
  		if (!this.shouldRenderField()) return null;
  
  		return <input type="hidden" name={this.props.paths.action} className="field-action" value={this.state.action} />;
  	},
  
  	renderFileToolbar () {
  		return (
  			<div key={this.props.path + '_toolbar'} className='file-toolbar'>
  				<div className='u-float-left'>
  					<Button onClick={this.changeFile}>
  						{this.hasFile() ? 'Change' : 'Upload'} File
  					</Button>
  					{this.hasFile() && this.renderClearButton()}
  				</div>
  			</div>
  		);
  	},
  
  	renderNote () {
  		if (!this.props.note) return null;
  
  		return <FormNote note={this.props.note} />;
  	},
  
  	renderUI () {
  		var container = [];
  		var body = [];
  		var hasFile = this.hasFile();
  
  		if (this.shouldRenderField()) {
  			if (hasFile) {
  				container.push(this.renderFileDetails(this.renderAlert()));
  			}
  			body.push(this.renderFileToolbar());
  		} else {
  			if (hasFile) {
  				container.push(this.renderFileDetails());
  			} else {
  				container.push(<FormInput noedit>no file</FormInput>);
  			}
  		}
  
  		return (
  			<FormField label={this.props.label} className="field-type-localfile">
  
  				{this.renderFileField()}
  				{this.renderFileAction()}
  
  				<div className="file-container">{container}</div>
  				{body}
  				{this.renderNote()}
  
  			</FormField>
  		);
  	}
  
  });
  