import React from 'react'
import axios from 'axios'
import { Redirect } from 'react-router'
import SearchModal from '../pages/Search/Component/SearchModal'
import ProfileImageC from './ProfileImageC'

const NavItem = props => {
  const pageURI = window.location.pathname + window.location.search
  const liClassName = (props.path === pageURI) ? 'nav-item active' : 'nav-item'
  const aClassName = props.disabled ? 'nav-link disabled' : 'nav-link'
  return (
    <li className={liClassName}>
      <a href={props.path} className={aClassName}>
        {props.name}
        {(props.path === pageURI) ? (<span className='sr-only'>(current)</span>) : ''}
      </a>
    </li>
  )
}

class NavDropdown extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isToggleOn: false
    }
  }
  showDropdown (e) {
    e.preventDefault()
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }))
  }
  render () {
    const classDropdownMenu = 'dropdown-menu' + (this.state.isToggleOn ? ' show' : '')
    return (
      <li className='nav-item dropdown' >
        <a className='nav-link dropdown-toggle' href='/' id='navbarDropdown' role='button' data-toggle='dropdown'
          aria-haspopup='true' aria-expanded='false'
          onClick={(e) => { this.showDropdown(e) }}>
          {this.props.name}
          <ProfileImageC picWidth={24} picHeight={24} />
        </a>
        <div className={classDropdownMenu} aria-labelledby='navbarDropdown'>
          {this.props.children}
        </div>
      </li>
    )
  }
}

class Navigation extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      state_query: '',
      state_matters: null,
      state_redirect: false,
      state_assignee: '',
      state_title: '',
      state_deadline: '',
      state_contract: '',
      state_subtype: '',
      state_lastEditor: ''
    }
  }

  onChangeSearchString = (evt) => {
    this.setState({
      state_query: evt.target.value
    })
  }

  onChangeAssignee = (evt) => {
    this.setState({
      state_assignee: evt.target.value
    })
  }

  onChangeLastEditor = (evt) => {
    this.setState({
      state_lastEditor: evt.target.value
    })
  }

  onChangeTitle = (evt) => {
    this.setState({
      state_title: evt.target.value
    })
  }

  onChangeDeadline = (evt) => {
    this.setState({
      state_deadline: evt.target.value
    })
  }

  onChangeContract = (evt) => {
    this.setState({
      state_contract: evt.target.value
    })
  }

  onChangeSubtype = (evt) => {
    this.setState({
      state_subtype: evt.target.value
    })
  }

  onSubmitAdvSearchForm = () => {
    console.log("In the onSubmitAdvSearchForm of Component 'Navigation'")

    let data = {
      localMatters: ''
    }

    let url = '' +
    'http://localhost:4000/api/search/advanced?' +
    'q_assignee=' + this.state.state_assignee + '&' +
    'q_title=' + this.state.state_title + '&' +
    'q_deadline=' + this.state.state_deadline + '&' +
    'q_contract=' + this.state.state_contract + '&' +
    'q_subtype=' + this.state.state_subtype + '&' +
    'q_last_editor=' + this.state.state_lastEditor
    axios.get(url, data.localMatters)
      .then(res => {
        this.setState({
          state_matters: res.data.results_matters,
          state_redirect: true
        })
      })
      .catch(err => {
        console.log('ERROR: ' + err)
      })
  }

  submitSearchForm = (event) => {
    event.preventDefault()
    console.log("In the submitSearchForm of Component 'Navigation'")
    let data = {
      localMatters: ''
    }
    let url = '' +
    'http://localhost:4000/api/search?' +
    'q=' + this.state.state_query
    axios.get(url, data.localMatters)
      .then(res => {
        this.setState({
          state_matters: res.data.results_matters,
          state_redirect: true
        })
      })
      .catch(err => {
        console.log('ERROR: ' + err)
      })
  }

  renderRedirect = () => {
    if (this.state.state_redirect) {
      return <Redirect to={{
        pathname: '/results',
        state: { state_results: this.state.state_matters }
      }} />
    }
  }

  clearSessionStorage = () => {
    sessionStorage.clear()
  }

  render () {
    return (
      <nav className='navbar navbar-expand-lg navbar-light bg-light' >
        <a className='navbar-brand' href='http://localhost:3000/'>
          <img src='https://www.miamidade.gov/branding/images/miami-dade-county-logo.JPG' width='60' height='30' alt='' />
        </a>
        <button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
          <span className='navbar-toggler-icon' />
        </button>

        <div className='collapse navbar-collapse' id='navbarSupportedContent'>
          <ul className='navbar-nav mr-auto'>

            <NavItem path='/path' name='Feed' />
            <NavItem path='/page2' name='My Items' />

            <NavDropdown name='' >
              <a className='dropdown-item' href='http://localhost:3000/profile'>Profile Page</a>
              <a className='dropdown-item' href='http://localhost:3000/' onClick={this.clearSessionStorage}>Logout</a>
              <div className='dropdown-divider' />
              <a className='dropdown-item' href='/'>Settings</a>
            </NavDropdown>
          </ul>
          {this.renderRedirect()}
          <form className='form-inline my-2 my-lg-0' onSubmit={this.submitSearchForm}>
            <input className='form-control mr-sm-2'
              type='search'
              placeholder='Search'
              aria-label='Search'
              position='center'
              id='searchString'
              value={this.props.state_query} /* Use "this.props" instead of props for client-side access */
              onChange={this.onChangeSearchString} /* Use this instead of "this" for functions */ />
            <button className='btn btn-outline-primary my-2 my-sm-0' type='submit'>Search</button>
          </form>
          <SearchModal
            changeAssignee={this.onChangeAssignee}
            assignee={this.state.state_assignee}
            changeTitle={this.onChangeTitle}
            title={this.state.state_title}
            changeDeadline={this.onChangeDeadline}
            deadline={this.state.state_deadline}
            changeContract={this.onChangeContract}
            contract={this.state.state_contract}
            changeSubtype={this.onChangeSubtype}
            subtype={this.state.state_subtype}
            changeLastEditor={this.onChangeLastEditor}
            lastEditor={this.state.state_lastEditor}
            clickSearch={this.onSubmitAdvSearchForm} />
        </div>
      </nav>
    )
  }
}

export default Navigation
