import React, { Component } from 'react';
import './App.css';


export default class LoginScreen extends Component {

  // Properties used by this component:
  // appActions, deviceInfo

  render() {
    // eslint-disable-next-line no-unused-vars
    let baseStyle = {};
    // eslint-disable-next-line no-unused-vars
    let layoutFlowStyle = {};
    if (this.props.transitionId && this.props.transitionId.length > 0 && this.props.atTopOfScreenStack && this.props.transitionForward) {
      baseStyle.animation = '0.25s ease-in-out '+this.props.transitionId;
    }
    if ( !this.props.atTopOfScreenStack) {
      layoutFlowStyle.height = '100vh';
      layoutFlowStyle.overflow = 'hidden';
    }

    const style_background = {
        width: '100%',
        height: '100%',
     };
    const style_background_outer = {
        backgroundColor: '#f4f4f4',
        pointerEvents: 'none',
     };
    const style_text_title = {
        fontSize: 34.4,
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif',
        color: '#0a99c0',
        textAlign: 'center',
     };
    const style_text_title_outer = {
        pointerEvents: 'none',
     };

    return (
      <div className="AppScreen LoginScreen" style={baseStyle}>
        <div className="background">
          <div className='appBg containerMinHeight elBackground' style={style_background_outer}>
            <div style={style_background} />

          </div>

        </div>
        <div className="layoutFlow" style={layoutFlowStyle}>
          <div className='elText_title' style={style_text_title_outer}>
            <div style={style_text_title}>
              <div>{this.props.locStrings.login_text_title}</div>
            </div>

          </div>

        </div>
      </div>
    )
  }
}