const appName = 'SBR Photo';
const logo = 'https://www.lugarvazio.com.br/img/2016/09/logo_lugar.png';
var pushInput = {title:'', file:'', msg:'', ios:false, android:false, redirURL:'', lang:''};

function callServer(inp) {
  //cal some external api to inform the data input
  let userData = "Title: "+inp.title+"\nCSV file: "+inp.file+"\nMessage: "+inp.msg+"\niOS: "+inp.ios+" Android: "+inp.android+" Lang: "+inp.lang+"\nURL redirect: "+inp.redirURL;
  return userData;
}

function getLog(log) {
	//call some external api to get the log
		return 'logfile txt....';
}

class Entrada extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(ev) {
        this.props.onChange(ev.target.value);
        value = undefined;
    }
    render() {
        const texto = this.props.legenda;
        let value = this.props.defaultInput;
        let pushArg = this.props.pushArg;
        if (value && pushArg) {
          switch (pushArg) {
            case 'file':
              pushInput.file = value;
              break;
            case 'title':
              pushInput.title = value;
        }};
        return (
                <div>
                <legend>{texto}</legend>
                <input 
                  value={value}
                  onChange={this.handleChange} />
                </div>
         );
    }
}
class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState(prevState => ({
                                    isToggleOn: !prevState.isToggleOn
                                    }));
    }
    render() {
        const refer = this.props.refer;
        if (refer == 'iOS') {pushInput.ios = this.state.isToggleOn};
        if (refer == 'Android') {pushInput.android = this.state.isToggleOn};
        return (
                <div className="toggle">
                {refer} &nbsp;
                <button onClick={this.handleClick}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
                </button></div>
         );
    }
}

class LangSelection extends React.Component {
	constructor(props) {
		super(props);
		this.state = {value: 'all'};
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange(event) {
		this.setState({value: event.target.value});
	}
	render() {
		pushInput.lang = this.state.value;
		return (
				<div className="toggle">
				<form onSubmit={this.handleSubmit}>
				<label>
				Lang:
					<select value={this.state.value} onChange={this.handleChange}>
				<option value="pt">Portuguese</option>
				<option value="en">English</option>
				<option value="all">All</option>
				</select>
				</label>
				</form></div>
		);
	}
}

class Push extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
        this.handlePush = this.handlePush.bind(this);
        this.handleLog = this.handleLog.bind(this);
        this.handleClear = this.handleClear.bind(this);
        this.handleRes = this.handleRes.bind(this);
    }
    handleRes(res) {
    	console.log('Received response...');
    	this.setState({value: this.state.value + res});
    }
    handlePush() {
        console.log('sending to server...');
        let resp = callServer(pushInput); 
        this.setState({value: this.state.value + resp});
    }
    handleLog() {
    	let log = getLog(true);
        this.setState({value: this.state.value + log});
    }
    handleClear() {
        this.setState({value: ''});
    }
    render() {
        return (
        		<div>
        		<button onClick={this.handlePush}>SEND</button>
        		<div className="log">
        		<button onClick={this.handleLog}>LOG</button>
        		</div>
        		{this.state.value != '' &&
        			<form onSubmit={this.handleClear}>
        			<textarea value={this.state.value} />
        			<input type="submit" value="Clear" />
        			</form>}
        		</div>
        );
    }
}

class App extends React.Component {
    constructor(props) {
    	super(props);
    }
    handleChangeFile(value) {
        pushInput.file = value;
    }
    handleChangeTitle(value) {
        pushInput.title = value;
    }
    handleChangeMsg(value) {
        pushInput.msg = value;
    }
    handleChangeRedir(value) {
        pushInput.redirURL = value;
    }
    
    render() {
    	return (
    			<div className="App">
    			<div className="App-header">
    			<img src={logo} className="App-logo" alt="logo" />
    				<h2>{appName} Push Notification Control</h2>
    				</div>
    				<p className="App-intro">
    				Fill the form and click Send to delivery Push Notification to app {appName}
    				</p>
    				<fieldset>
    				<Entrada
    				legenda="CSV token file (full path)"
    					defaultInput="/user/tiao/documents/push/token.csv"
    						pushArg="file"
    							onChange={this.handleChangeFile} />
    				<Entrada
    				legenda="Title (optional)"
    					defaultInput="SRB Photo"
    						pushArg="title"
    							onChange={this.handleChangeTitle} />
    				<Entrada
    				legenda="Message"
    					onChange={this.handleChangeMsg} />
    				<Entrada
    				legenda="Redirect URL (iOS)"
    					onChange={this.handleChangeRedir} />
    				<Toggle refer='iOS' />
    				<Toggle refer='Android' />
    					<LangSelection />
    				</fieldset>
    				<Push />
    				</div>
    	);
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);