//App.js
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './Home';

const root = document.getElementById("root");

React.render(<Home />, root); 

// Home.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import cookie from 'react-cookie';

import Hello from './Hello';
import LoginPanel from './LoginPanel';

class Home extends Component {
	componentWillMount(){
		this.state = {
			userId: ''
		};
		//adminId: cookie.load('adminId'),
	}

	onLogin(adminId){
		this.setState({
			userId:userId
		});
		//cookie.save('adminId',adminId, { path: '/'});
	}

	onLogout(){
		this.setState({
			userId:''
		});
		//cookie.remove('adminId', { path: '/'});
	}

	render(){
		if(!this.state.userId){
			return <LoginPanel 
					onSuccess={this.onLogin.bind(this)} 
					/>;
		}

		return <Hello 
			userId={this.state.userId}
			onLogout={this.onLogout.bind(this)}
			/>;
	}
}
export default Home;

// LoginPanel.js
import React, { Component , PropTypes } from 'react';
import ReactDOM from 'react-dom';
import 'whatwg-fetch';

import AlertContainer from 'react-alert';

class LoginPanel extends Component {
	constructor(){
		super(...arguments);
		this.state ={
			requestID:'',
			requestPW:''
		};
		this.alertOptions = {
			offset: 14,
			position: 'top right',
			theme: 'dark',
			time: 5000,
			transition: 'scale'
		};

		this.requestIDChange = this.requestIDChange.bind(this);
		this.requestPWChange = this.requestPWChange.bind(this);
	}

	onSubmit(){
		let userInfo={
			'user_id':this.state.requestID,
			'user_pw':this.state.requestPW
		};

		fetch('/login',{
			method: 'POST',
			headers:{
				'Content-Type': 'application/json'
			},
			body: JSON.stringify(userInfo)
	    }).then((response)=> response.json())
	    .then((responseData)=>{
	    	if(responseData.loginresult){
	    		this.props.onSuccess(this.state.requestID);
	    	}
	    	else{
	    		msg.show(`일치하는 ID와 PW가 없습니다.`
					, {
					time: 2000,
					type: 'error'
				});
				this.setState({
					requestID:'',
					requestPW:''
				});
	    	}
	    });
	}

	requestIDChange(event){
		this.setState({requestID: event.target.value});
	}
	requestPWChange(event){
		this.setState({requestPW: event.target.value});
	}

	render(){
		return (
			<div className="loginpanel">
				<div className="loginwindow">
					<AlertContainer ref={ (a) => global.msg = a} {...this.alertOptions} />
					<ul>
						<li className="title">Login Template</li>
						<li><input type="text" name="requestID" placeholder="Admin Id" value={this.state.requestID} onChange={this.requestIDChange}/></li>
						<li><input type="password" name="requestPW" placeholder="Password" value={this.state.requestPW} onChange={this.requestPWChange}/></li>
						<li><button className="loginwindowbutton" onClick={this.onSubmit.bind(this)}>로그인</button></li>
					</ul>
				</div>
			</div>
		);
	}
}
LoginPanel.propTypes={
	onSuccess: PropTypes.function
};
export default LoginPanel;

// Hello.js
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import 'whatwg-fetch';

import UserInfo from './UserInfo';

// Parent Component
class Hello extends Component {
	constructor(){
		super(...arguments);
		this.state = {
			mans:[]
		};
	}

	componentDidMount(){
		fetch('/man',{
			method: 'get',
			dataType: 'json',
			headers:{
				'Accept': 'application/json',
				'Content-Type': 'application/json'
			}
		})
		.then((response) => response.json())
		.then((responseData) => {
			this.setState({mans: responseData});
		})
		.catch((error)=>{
			console.log('Error fetching man',error);
		});
	}
	render() {
		let mans = this.state.mans.map( (man) => {
			return <Guy
					name={man.name}
					age={man.age}
					createDateTime={man.create_datetime}
					{...man}/>
		});

		let userPanel = {
			return <UserInfo
				userId={this.props.userId}
				onLogout={this.props.onLogout}
				{...UserInfo}/>
		};

		return (
			<div>
				{userPanel}
				<h1>CalyFactory Developers</h1>
				<ul>
				{mans}
				</ul>
			</div>
		);
	}
}
// Child Component
class Guy extends Component {
	render() {
		return (
			<li>
				{this.props.name}, age is {this.props.age}. create time : {this.props.createDateTime}
			</li>
		);
	}
}
export default Hello;

// UserInfo.js
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

class UserInfo extends Component {
	render(){
		return (
			<div className="userinfo">
				<li className="title">CalyFactory</li>
				<li>{''}{this.props.userId} 님 안녕하세요 ! <input type="button" className="userinfologoutbutton" value="로그아웃" onClick={() => this.props.onLogout()} /></li>
			</div>
		);
	}
};
UserInfo.propTypes={
	userId: PropTypes.string,
	onLogout: PropTypes.function
};
export default UserInfo;

// main.js
import express from 'express';
import bodyParser from 'body-parser';
import mysql from 'mysql';
import path from 'path';


let dbconfig = require(__dirname+'/../server/config/db-config.json');
let connection = mysql.createConnection(dbconfig);

const app = express();
const port = 3000;

app.use('/', express.static(__dirname + "/../public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get('/man', (req, res) =>{
	connection.query("SELECT * FROM man", (err, rows) => {
		if(err) throw err;

		res.send(rows);
	});
});

app.get('/login', (req, res) =>{
	connection.query("SELECT * FROM user WHERE user_id=\'"+req.body.user_id+"\' and user_pw=\'"+req.body.user_pw+"\'", (err, rows) => {
		if(err) throw err;

		if(rows.length>0)
			return res.send({loginresult:true,name:rows[0].user_name});
		else
			return res.send({loginresult:false});
	});
});

const server = app.listen(port, () => {
	console.log('Express listening on port', port);
});