import React from 'react'
import { Container } from 'reactstrap'
import { BlankTemplate } from '../../templates'
import LoginPanel from './LoginPanel'
import DetailPanel from './DetailPanel'
import './LoginPage.css'

class LoginPage extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      loginMode: true
    }
    
    this._handleChangeLoginMode = this._handleChangeLoginMode.bind(this)
  }

  _handleChangeLoginMode() {
    this.setState({ loginMode: !this.state.loginMode })
  }

  render() {
    const { loginMode } = this.state

    return (
      <BlankTemplate>
        <Container>
          {
            !loginMode 
              ? <DetailPanel 
                  onChangeLoginMode={this._handleChangeLoginMode}
                  {...this.props} 
                />
              : <LoginPanel                  
                  onChangeLoginMode={this._handleChangeLoginMode}
                  {...this.props}
                />
          }
        </Container>
      </BlankTemplate>
    )
  }
}
export default LoginPage