// @flow

import Icon from '@conveyal/woonerf/components/icon'
import React, {Component} from 'react'
import { Button } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import {browserHistory} from 'react-router'
import Select from 'react-select'

import {getAbbreviatedProjectName} from '../../common/util/util'
import type {Project} from '../../types'
import type {ManagerUserState} from '../../types/reducers'

type Props = {
  activeProject: Project,
  user: ManagerUserState,
  visibleProjects: Array<Project>
}

type State = {
  selectedOption: any
}

export default class HomeProjectDropdown extends Component<Props, State> {
  state = {
    selectedOption: ''
  }

  handleChange = (selectedOption: any, activeProject: any) => {
    this.setState({selectedOption})
    activeProject === null
      ? browserHistory.push(`/home/${selectedOption.value}`)
      : browserHistory.push(`/home/`)
  }

  render () {
    const {
      activeProject,
      user,
      visibleProjects
    } = this.props
    const {profile} = user
    const abbreviatedProjectName = getAbbreviatedProjectName(activeProject)
    const isAdmin = user.permissions && user.permissions.isApplicationAdmin()
    if (!profile) return null
    return (
      <div style={{marginBottom: '20px'}}>
        {
          isAdmin && (
            <LinkContainer to='/project/new'>
              <Button>
                <Icon type='plus' /> New project
              </Button>
            </LinkContainer>
          )
        }
        {activeProject
          ? <LinkContainer className='pull-right' style={{marginBottom: '5px'}} to={`/project/${activeProject.id}`}>
            <Button bsStyle='primary'>View {abbreviatedProjectName}</Button>
          </LinkContainer>
          : null
        }
        <Select
          value={activeProject && {value: activeProject.id, label: activeProject.name}}
          onChange={(selectedOption) => this.handleChange(selectedOption, activeProject)}
          options={visibleProjects.map(p => ({value: p.id, label: p.name}))}
          style={{marginTop: '5px'}}
        />
      </div>
    )
  }
}

@@ -148,23 +148,22 @@
 rt %7B
- LinkContainer 
+browserHistory
 %7D fr
@@ -182,42 +182,33 @@
 uter
--bootstrap'%0Aimport %7BbrowserHistory
+'%0Aimport %7B LinkContainer 
 %7D fr
@@ -215,32 +215,42 @@
 om 'react-router
+-bootstrap
 '%0Aimport Select 
@@ -269,17 +269,16 @@
 select'%0A
-%0A
 import %7B
@@ -334,16 +334,17 @@
 l/util'%0A
+%0A
 import t
@@ -355,16 +355,35 @@
 %7BProject
+, ReactSelectOption
 %7D from '
@@ -563,48 +563,8 @@
 %0A%7D%0A%0A
-type State = %7B%0A  selectedOption: any%0A%7D%0A%0A
 expo
@@ -627,193 +627,65 @@
 rops
-, State%3E %7B%0A  state = %7B%0A    selectedOption: ''%0A  %7D%0A%0A  handleChange = (selectedOption: any, activeProject: any) =%3E %7B%0A    this.setState(%7Bs
+%3E %7B%0A  handleChange = (option: ReactS
 elect
-ed
 Option
-%7D)%0A    activeProject === null%0A      ?
+) =%3E %7B%0A   
  bro
@@ -710,25 +710,26 @@
 /home/$%7B
-selectedO
+option ? o
 ption.va
@@ -735,47 +735,14 @@
 alue
-%7D%60)%0A      : browserHistory.push(%60/home/
+ : ''%7D
 %60)%0A 
@@ -859,208 +859,315 @@
 nst 
-%7Bprofile%7D = user%0A    const abbreviatedProjectName = getAbbreviatedProjectName(activeProject)%0A    const isAdmin = user.permissions && user.permissions.isApplicationAdmin()%0A    if (!profile) return null
+isAdmin = user.permissions && user.permissions.isApplicationAdmin()%0A    const %7Bprofile%7D = user%0A    if (!profile) return null%0A    const abbreviatedProjectName = getAbbreviatedProjectName(activeProject)%0A    const options = visibleProjects.map(%0A      project =%3E (%7Bvalue: project.id, label: project.name%7D)%0A    )
 %0A   
@@ -1494,16 +1494,28 @@
 ontainer
+%0A           
  classNa
@@ -1529,16 +1529,28 @@
 l-right'
+%0A           
  style=%7B
@@ -1571,16 +1571,28 @@
  '5px'%7D%7D
+%0A           
  to=%7B%60/p
@@ -1619,16 +1619,27 @@
 ct.id%7D%60%7D
+%0A          
 %3E%0A      
@@ -1818,33 +1818,8 @@
 && %7B
-value: activeProject.id, 
 labe
@@ -1866,153 +1866,53 @@
 ge=%7B
-(selectedOption) =%3E this.handleChange(selectedOption, activeProject)%7D%0A          options=%7BvisibleProjects.map(p =%3E (%7Bvalue: p.id, label: p.name%7D))
+this.handleChange%7D%0A          options=%7Boptions
 %7D%0A  

Refactor code