import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { Button, Col, Row, CardGroup, Card, CardBody } from 'reactstrap'
import { IconFA } from '../../components/Icon'

function LoginPanel({ ...props }) {
  const columnSize = props.showDescColumn ? 8 : 4

  const loginBoxSectionClass = classNames({
    'box-section': true,
    'center': !props.showDescColumn
  })
  return (
    <Row className="justify-content-center">
      <Col md={columnSize}>
        <CardGroup>
          <Card>
            <CardBody className="box">
              <div className={loginBoxSectionClass}>  
                {
                  !props.showDescColumn && (
                    props.appLogoUri && (<img className="logo" src={props.appLogoUri} alt="app-logo" />)
                  )
                }                
                <h1 className="box-title">{props.loginTitle}</h1>
                <p className="box-desc text-muted">{props.loginDesc}</p>
              </div>
              <div className="box-section section-bottom">
                <Button color="primary" size="lg" block onClick={props.onClickLogin}>
                  <IconFA name="sign-in" />
                  {` ${props.buttonTextLogin}`}
                </Button>
              </div>
            </CardBody>
          </Card>
          {
            props.showDescColumn && (
              <Card className="text-white bg-primary d-md-down-none">
                <CardBody className="box">
                  <div className="box-section center">                    
                    { props.appLogoUri && (<img className="logo" src={props.appLogoUri} alt="app-logo" />) }
                    <h2 className="box-title">{props.descTitle}</h2>
                    <p className="box-text">{props.descText}</p>
                  </div>
                  <div className="box-section section-bottom">
                    <Button color="light" size="lg" block onClick={props.onChangeLoginMode}>
                      {props.buttonTextDesc}
                    </Button>
                  </div>
                </CardBody>
              </Card>
            )
          }
        </CardGroup>
      </Col>
    </Row>
  )
}
export default LoginPanel

LoginPanel.propTypes = {
  appLogoUri: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
  loginTitle: PropTypes.string.isRequired,
  loginDesc: PropTypes.string,
  buttonTextLogin: PropTypes.string,
  descTitle: PropTypes.string,
  descText: PropTypes.string,
  buttonTextDesc: PropTypes.string,
  showDescColumn: PropTypes.bool,
  onClickLogin: PropTypes.func.isRequired,
}
LoginPanel.defaultProps = {
  loginTitle: 'Login',
  loginDesc: 'Sign In to your account',
  buttonTextLogin: 'Login',
  descTitle: 'App Title',
  descText: 'Enter the description of app',
  buttonTextDesc: 'More',
  showDescColumn: true
}