import React from "react";
import { BrowserRouter as Router, Redirect, Route} from 'react-router-dom';
import Header from './components/Header'
import Footer from './components/Footer'
import logo from './assets/img/logo.png';
import Loginform from './components/Loginform';
import Feedbackform from './components/Feedbackform';
import Contact from './components/Contact';
import About from './components/About';
import  Sendfeedback from './components/Sendfeedback'
import Registration from './components/Registration';
import Signupform from './components/Signupform';
import Home from './components/Home';
import Blog from './components/Blog';
import Videos from './components/Videos';
import Breadcrumbs from './components/Breadcrumbs';
import Subheader from './components/Subheader';
import SingleBlog from './components/SingleBlog';
import Cutoff from './components/Cutoff';
import swal from "sweetalert";


class App extends React.Component {
  constructor(){
    super();
    this.state={
      login:'LogIn',
      logout:'SignUp',
      loginStatus:false,
      data:'',
      message:'   Login to get free Career Guidance blogs and useful content-related videos',
      route:'login'
    }
  }

  onMessageChange = (message) =>{
    this.setState({message:message})
  }
  
  onLoginChange = (login) =>{
    this.setState({login:login})
  }

  onRouteChange = (login) =>{
    this.setState({route:login})
  }

  onLogoutChange = (logout) =>{
    this.setState({logout:logout})
  }

  onDataChange = (data) =>{
    this.setState({data:data})
  }

  onLoginStatusChange = (loginStatus) =>{
    this.setState({loginStatus:loginStatus})
  }
  componentDidMount(){
    const env=process.env.NODE_ENV;
    console.log(env)
    const url = env === 'production'? 'http://35.188.161.64/server/auth':'http://localhost:5000/auth'
    fetch(url,{
      method:'get',
      headers: {"x-access-token":localStorage.getItem("token") },
    })
    .then((response) => {
      return response.json();
    }).then((response_json) => {

      this.setState({data:response_json});

      // console.log(this.state.data)
      if(this.state.data.auth === true)
      {
        this.setState({login:this.state.data.data,logout:"LogOut",loginStatus:"true"})
      }
      else{
        this.setState({message:"   Login to get free Career Guidance blogs and useful content-related videos"})
        swal("Welcome to Vision Foresighting Future!","Login to get free Career Guidance blogs and useful content-related videos","info")
        
      }
      
    })
  }


  render(){ 
  // let path = window.location.pathname.slice(1).charAt(0).toUpperCase() + window.location.pathname.slice(2);
  let path = window.location.pathname;

  if(this.state.loginStatus)
 {
    return (
      <Router>
      <div>
      <Header logo={logo} isSignedIn={this.state.loginStatus} login={this.state.login} logout={this.state.logout} />
        <Route path='/home' render={(props) => <Home isSignedIn={this.state.loginStatus} />} />
        <Route path='/about' component={About} />
        <Route path='/contact' component={Contact} /> 
        <Route path='/premiumservice' render={(props) => <Registration onRouteChange={this.onRouteChange} />} />
        <Route path='/cutoff' render={(props) => <Cutoff /> } />
        <Route path='/feedback' render={(props) => <Feedbackform onRouteChange={this.onRouteChange} />} />
        <Route path='/blogs' exact component={Blog} />
        <Route path='/blogs/:id' render={(props) => <SingleBlog />} />
        <Route path='/videos' component={Videos} />
        <Sendfeedback />
        <Footer isSignedIn={this.state.loginStatus}/>
     </div>
     </Router>
    )
  }
  else  {
    return(
      <Router>
        <div>
        
        <Header logo={logo} isSignedIn={this.state.loginStatus} login={this.state.login} logout={this.state.logout} onLoginStatusChange={this.onLoginStatusChange} />
        
        <Route path='/home' render={(props) => <Home isSignedIn={this.state.loginStatus} />} />
        <Route path='/about' component={About} />
        <Route path='/contact' component={Contact} /> 
       
        <Route path='/register' render={(props) => <Signupform onRouteChange={this.onRouteChange} />} />
        {path === "/" && 
        <div>
          <Breadcrumbs path="Login" />
          <Subheader path="Login" />
        </div>
        }
        {this.state.route === 'login' && <Loginform onLoginStatusChange={this.onLoginStatusChange} onRouteChange={this.onRouteChange} onLoginChange={this.onLoginChange} onLogoutChange={this.onLogoutChange} />}
        {this.state.route !== 'login' && <Redirect to='/home'push />}
     
        <Footer isSignedIn={this.state.loginStatus}/>
        </div>
      </Router>
    )
  }
  }
}


export default App;