text: import React from 'react'
  import PropTypes from 'prop-types'
  
  import pic01 from '../images/pic01.jpg'
  import pic02 from '../images/pic02.jpg'
  import pic03 from '../images/pic03.jpg'
  
  class Main extends React.Component {
    render() {
  
      let close = <div className="close" onClick={() => {this.props.onCloseArticle()}}></div>
  
      return (
        <div ref={this.props.setWrapperRef} id="main" style={this.props.timeout ? {display: 'flex'} : {display: 'none'}}>
  
          <article id="intro" className={`${this.props.article === 'intro' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
            <h2 className="major">Intro</h2>
            <span className="image main"><img src={pic01} alt="" /></span>
            <p>I’m Haroon Abbasi, Software Engineer and Fullstack Developer from Lahore, Pakistan. I love computer programming that's why I choose it as my career. I have a very deep interest in my work. Programming is passion.</p>
            {close}
          </article>
  
          <article id="work" className={`${this.props.article === 'work' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
            <h2 className="major">Work</h2>
            <span className="image main"><img src={pic02} alt="" /></span>
            <p>From Last 7 years working as Software Engineer, desktop then web. From Last 6.5 years working in web and spent year and half in Cross Platform Mobile Development as well</p>
            {close}
          </article>
  
          <article id="about" className={`${this.props.article === 'about' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
            <h2 className="major">About</h2>
            <span className="image main"><img src={pic01} alt="" /></span>
            <p>I have experience in Web Development, Mean Stack, Windows application development and now from previous From Last 6.5 years Web Application Development is my new track to drive with extreme speed for Front-End Development, drifting skills to tackle different situations, and high power mind engine to boost back-end development. I am constantly looking to further my skill set and knowledge, keeping track of modern practices, trends and technologies within the industry.</p>
            {close}
          </article>
  
          <article id="contact" className={`${this.props.article === 'contact' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
            <h2 className="major">Contact</h2>
            <form method="post" action="https://formspree.io/haroonabbasi.ali@gmail.com">
              <div className="field half first">
                <label htmlFor="name">Name</label>
                <input type="text" name="name" id="name" />
              </div>
              <div className="field half">
                <label htmlFor="email">Email</label>
                <input type="text" name="email" id="email" />
              </div>
              <div className="field">
                <label htmlFor="message">Message</label>
                <textarea name="message" id="message" rows="4"></textarea>
              </div>
              <ul className="actions">
                <li><input type="submit" value="Send Message" className="special" /></li>
                <li><input type="reset" value="Reset" /></li>
              </ul>
            </form>
            <ul className="icons">
              <li><a href="https://twitter.com/Haroonaliabbasi" className="icon fa-twitter"><span className="label">Twitter</span></a></li>
              <li><a href="https://web.facebook.com/haroon.ali.abbasi" className="icon fa-facebook"><span className="label">Facebook</span></a></li>
              <li><a href="https://www.instagram.com/haroonabbasi/" className="icon fa-instagram"><span className="label">Instagram</span></a></li>
              <li><a href="https://github.com/haroonabbasi" className="icon fa-github"><span className="label">GitHub</span></a></li>
            </ul>
            {close}
          </article>
  
        </div>
      )
    }
  }
  
  Main.propTypes = {
    route: PropTypes.object,
    article: PropTypes.string,
    articleTimeout: PropTypes.bool,
    onCloseArticle: PropTypes.func,
    timeout: PropTypes.bool,
    setWrapperRef: PropTypes.func.isRequired,
  }
  
  export default Main