import React, { Component } from 'react'
import { Link } from 'react-router'
import Sticky from 'react-sticky'
import { categoryPath } from '../lib/constants'
// import { categoryPath } from '../lib/constants'

// require('react-burger-menu').slide

if (process.env.BROWSER) {
  require('./NavBar.css')
  require('./MobileNaviBar.css')
}

export default class MobileNaviBar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
    }
  }

  render() {
    const { taiwanPath, reviewPath, photographyPath, culturePath, intlPath, electionPath } = categoryPath
    let backgroundColor = '#FFF'
    let linkColor = 'black'
    let logo = '/asset/logo.png'
    let burgerIconClass = 'nav-icon'
    let mobileMenuClass = 'mobile-link-container'
    if (this.props.bgStyle === 'dark') {
      backgroundColor = '#3e3a39'
      linkColor = 'white'
      logo = 'asset/logo_dark.png'
    }
    if (this.state.open) {
      burgerIconClass = 'nav-icon open'
      mobileMenuClass = 'mobile-link-container open'
    }

    return (
      <Sticky topOffset={300}>
        <div style= {{ backgroundColor: backgroundColor }}>
          <div className="nav-logo">
            <Link to="/"><img src={logo} /></Link>
          </div>
          <div className={burgerIconClass} onClick={()=> { this.setState( { open: !this.state.open } )}}>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div className={mobileMenuClass}>
            <Link style={{ color: linkColor }} to={taiwanPath}><h1>台灣</h1></Link>
            <Link style={{ color: linkColor }} to={intlPath}><h1>國際兩岸</h1></Link>
            <Link style={{ color: linkColor }} to={culturePath}><h1>文化</h1></Link>
            <Link style={{ color: linkColor }} to={photographyPath}><h1>影像</h1></Link>
            <Link style={{ color: linkColor }} to={reviewPath}><h1>專欄</h1></Link>
            <Link style={{ color: linkColor }} to={electionPath}><h1>2016大選</h1></Link>
          </div>
        </div>
      </Sticky>
    )
  }
}

@@ -566,22 +566,8 @@
 Path
-, electionPath
  %7D =
@@ -1930,96 +1930,8 @@
 nk%3E%0A
-            %3CLink style=%7B%7B color: linkColor %7D%7D to=%7BelectionPath%7D%3E%3Ch1%3E2016%E5%A4%A7%E9%81%B8%3C/h1%3E%3C/Link%3E%0A
     

remove the election link in MobileNavBar