import React, { Component, Suspense, lazy } from 'react'
import { Route, Switch, Redirect, withRouter } from 'react-router-dom'
import config from 'src/settings/formsConfig'

// Components
import Header from 'src/components/Navigation/Header'
import Info from 'src/components/Auth/InfoWrap'
import Loader from 'src/components/shared/Loader'

// Styles
import { AuthRoutesContainer, AuthWrapper } from '../Layout/style'

// LAZY LOADING COMPONENTS (On my opinion this isn't good)
const Login = lazy(() =>
  import(/* webpackChunkName: "Login" */ '../../components/Auth/Login/Login'),
)
const SignUp = lazy(() =>
  import(/* webpackChunkName: "SignUp" */ '../../components/Auth/Registration'),
)
const ForgotPassword = lazy(() =>
  import(/* webpackChunkName: "ForgotPassword" */ '../../components/Auth/ForgotPassword'),
)
const RegistrationSuccess = lazy(() =>
  import(/* webpackChunkName: "RegistrationSuccess" */ '../../components/Auth/Registration/Success'),
)
const ForgotPasswordSuccess = lazy(() =>
  import(/* webpackChunkName: "ForgotPasswordSuccess" */ '../../components/Auth/ForgotPassword/Success'),
)
const WrongPassword3Times = lazy(() =>
  import(/* webpackChunkName: "WrongPassword3Times" */ '../../components/Auth/Login/WrongPassword3Times'),
)
const BlockUser = lazy(() =>
  import(/* webpackChunkName: "WrongPassword3Times" */ '../../components/Auth/BlockUser'),
)
const Sprite = lazy(() => import(/* webpackChunkName: "Sprite" */ 'src/components/Auth/sprite.js'))

class AuthLayout extends Component {
  state = {
    isWideStyle: false,
    isAttentionShowed: false,
    login: ''
  }

  // Remove this and modify width inside Info component's styles
  static getDerivedStateFromProps(nextProps) {
    const { pathname } = nextProps.location
    if (pathname === '/forgot-password' || pathname === '/block-user') {
      return { isWideStyle: true }
    }
    return { isWideStyle: false }
  }

  // Attention toggle
  showAttention = () => this.setState({ isAttentionShowed: true })

  hideAttention = () => this.setState({ isAttentionShowed: false })

  loginChangeHandler = (value) => this.setState({login: value})

  render() {
    // Destructuring values
    const { isWideStyle, isAttentionShowed, login } = this.state
    console.log(this.state)
    return (
      <AuthWrapper className="flex AuthWrapper">
        <AuthRoutesContainer isWideStyle={isWideStyle} className="flex">
          <Header />
          <Suspense fallback={<Loader message="Loading..." />}>
            <Sprite />
            <Switch>
              <Route
                path="/login"
                component={props => (
                  <Login
                    config={config.auth.login}
                    isAttentionShowed={isAttentionShowed}
                    showAttention={this.showAttention}
                    hideAttention={this.hideAttention}
                    loginChangeHandler={this.loginChangeHandler}
                    login={login}
                    {...props}
                  />
                )}
              />
              <Route
                path="/sign-up"
                component={props => <SignUp config={config.auth.register} {...props} />}
              />
              <Route
                path="/forgot-password"
                component={props => (
                  <ForgotPassword config={config.auth.forgotPassword} {...props} />
                )}
              />
              <Route
                path="/forgot-password-success"
                component={props => <ForgotPasswordSuccess {...props} />}
              />
              <Route
                path="/wrong-password"
                component={props => <WrongPassword3Times {...props} />}
              />
              <Route
                path="/registration-success"
                component={props => <RegistrationSuccess {...props} />}
              />
              <Route
                path="/block-user"
                component={props => <BlockUser {...props} config={config.auth.blockUser} />}
              />
              <Redirect path="*" to="/login" />
            </Switch>
          </Suspense>
        </AuthRoutesContainer>
        <Info isWideStyle={isWideStyle} />
      </AuthWrapper>
    )
  }
}

export default withRouter(AuthLayout)