// // Store all components of React Router inside variable
const {
  Route,
  Router,
  Link,
  hashHistory,
  IndexRoute,
  IndexLink
} = ReactRouter;

// Store the container for rendering our website
const appRoot = document.querySelector('.appRoot');

// Component for main component
class App extends React.Component {
  render() {
    return (
      <div>
        <Navigation />

        {/* Render active Route or indexRoute */}
        {this.props.children}
      </div>
    );
  }
}

// Component for Home page
class Home extends React.Component {
  componentWillMount() {
    document.body.classList.add('page-home');
  }
  
  componentWillUnmount() {
    document.body.classList.remove('page-home');
  }

  render() {
    return (
      <div className='container'>
        <div className='row'>
          <div className='col-md-10 push-md-1 col-lg-8 push-lg-2 text-center'>
            <h1>Anthony Sabia</h1>
            
            <p>A web designer &amp; developer from New York, USA, who focuses on building interactive experiences &amp; mobile apps, currently leading a design team at Spotify.</p>
          </div>
        </div>
      </div>
    );
  }
}

// Component for About page
class About extends React.Component {
  componentWillMount() {
    document.body.classList.add('page-about');
  }
  
  componentWillUnmount() {
    document.body.classList.remove('page-about');
  }

  render() {
    return (
      <div className='container'>
        <div className='row'>
          <div className='col-md-10 push-md-1 col-lg-8 push-lg-2'>
            <h1>About Me</h1>

            <p>I like to focus on creating unique and clean design concepts, prototypes and interactive experiences. My expertise and skills cover the whole design process, from research and to visual design and execution.</p>

            <p>I work with a wide range of clients, from startups to well-established companies. My clients are usually looking for user-centered design and product design visions to help them improve their product and grow their brand.</p>
          </div>
        </div>
      </div>
    );
  }
}

// Component for Contact page
class Contact extends React.Component {
  componentWillMount() {
    document.body.classList.add('page-contact');
  }
  
  componentWillUnmount() {
    document.body.classList.remove('page-contact');
  }

  render() {
    return (
      <div className='container'>
        <div className='row'>
          <div className='col-md-8 push-md-2 col-lg-6 push-lg-3'>
            <h1>Let's get in touch!</h1>
            
            <form formAction='' className='card-form'>
              <div className='row form-group'>
                <div className='col-6'>
                  <input className='form-control' name='formName' id='formName' type='text' placeholder='Your name' />
                </div>

                <div className='col-6'>
                  <input className='form-control' name='formEmail' id='formEmail' type='email' placeholder='Your email address' />
                </div>
              </div>

              <fieldset className='form-group'>
                <textarea className='form-control' name='formMessage' id='formMessage' placeholder='Your message' required ></textarea>
              </fieldset>

              <fieldset className='form-group text-center'>
                <button className='btn btn-primary' type='submit'>Send message</button>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

// Component for Gallery page
class Gallery extends React.Component {
  componentWillMount() {
    document.body.classList.add('page-gallery');
  }
  
  componentWillUnmount() {
    document.body.classList.remove('page-gallery');
  }

  render() {
    return (
      <div className='container'>
        <h1>Featured Projects</h1>

        <p className='mb-4 text-center'>Selection of projects finished between years 2014 — 2016.</p>

        <div className='row'>
          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/40433/screenshots/3205585/dri.png' alt='' />
          </div>

          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/40433/screenshots/3213974/untitled-1.png' alt='' />
          </div>

          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/182336/screenshots/3219163/dribbble_shot.png' alt='' />
          </div>
        </div>

        <div className='row'>
          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/692322/screenshots/3217252/profile.png' alt='' />
          </div>

          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/3208495/web_site_tea.png' alt='' />
          </div>

          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/784847/screenshots/3218599/roposo.com_website_exploration.png' alt='' />
          </div>
        </div>

        <div className='row'>
          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/66340/screenshots/3206003/home.jpg' alt='' />
          </div>

          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/273461/screenshots/3218915/chewy.png' alt='' />
          </div>

          <div className='col-4'>
            <img src='https://d13yacurqjgara.cloudfront.net/users/274994/screenshots/3218870/dashboard.png' alt='' />
          </div>
        </div>
      </div>
    );
  }
}

// Component for NotFound - 404 - page
class NotFound extends React.Component {
  componentWillMount() {
    document.body.classList.add('page-not-found');
  }
  
  componentWillUnmount() {
    document.body.classList.remove('page-not-found');
  }

  render() {
    return (
      <div className='container'>
        <div className='row'>
          <div className='col-md-10 push-md-1 col-lg-8 push-lg-2 text-center'>
            <h1 className='mt-4 mb-4'>404!</h1>
            
            <h2>The page you are looking for doesn't exist.</h2>
          </div>
        </div>
      </div>
    );
  }
}

// Component for Navigation
class Navigation extends React.Component {
  render() {
    return (
      <nav className='navbar navbar-toggleable-sm'>
        <button className='navbar-toggler navbar-toggler-right' type='button' data-toggle='collapse' data-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation'>
          <span className='navbar-toggler-icon'></span>
        </button>

        <div className='collapse navbar-collapse justify-content-center' id='navbarNav'>
          <ul className='nav flex-column flex-md-row' role='nav'>
            <li className='nav-item'>
              {/* Note about Links: parent route is active when any child route is active (it has always class ¨'nav-link-active'). We want the link to '/' be active only when the index route is active. For this reason, we will use 'IndexLink' */}
              <IndexLink to='/' className='nav-link' activeClassName='nav-link-active'>Home</IndexLink>
              {/* 'activeClassName' allow us to add class when the link is active (current Route). Another option is using 'activeStyle' and CSS styles. */}
            </li>

            <li className='nav-item'>
              {/* Link is similar to <a/> tag. The difference is that Link is aware of the Router (screen) it is rendered in. It allows you to wire together links with Routes (via 'to' attribute). */}
              <Link className='nav-link' activeClassName='nav-link-active' to='/about'>About</Link>
            </li>

            <li className='nav-item'>
              <Link className='nav-link' activeClassName='nav-link-active' to='/gallery'>Gallery</Link>
            </li>

            <li className='nav-item'>
              <Link className='nav-link' activeClassName='nav-link-active' to='/contact'>Contact</Link>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

ReactDOM.render((
  <Router history={hashHistory}>
    {/* 'hashHistory' manages the routing history with the hash portion of the URL. */}
    <Route path='/' component={App}>
      {/* IndexRoute allows us to render a component when we visit '/'.
      Note: IndexRoute has no path - it becomes this.props.children of the parent when no other child of the parent matches. */}
      <IndexRoute component={Home} />
      {/* Each Route is child of 'App'. This allows the components inside of App share the navigation. Otherwise, we would need to add Navigation compoonent into every page (component) */}
      <Route path='/about' component={About} />
      <Route path='/gallery' component={Gallery} />
      <Route path='/contact' component={Contact} />
      <Route path='*' component={NotFound} />
    </Route>
  </Router>
), appRoot);