import React, {Component} from 'react'
import {Link} from 'react-router'
import {Injectable, Injector} from 'react-injectables'

import SearchBar from 'components/SearchBar.js'
import CreateButton from 'components/CreateButton.js'

import logo from 'resources/logo.png'

const backgroundCss = {
	position: 'fixed',
	top: 0,
	left: 0,
	right: 0,
	background: '#fff',
	paddingTop: '58px',
	height: '132px',
	boxShadow: '0 4px 3px 0 rgba(0,0,0,0.1)',
	zIndex: 100
}

const logoCss = {
	width: '164px',
}

class Header extends Component {
	render() {
		let leftContent, middleContent, rightContent
		this.props.injections.forEach(injection => {
			let content = injection.props.children

			if (content && content.props) {
				if (content.props.left)
					return leftContent = injection
				else if (content.props.right)
					return rightContent = injection
			}
			return middleContent = injection
		})

		return (
			<header style={backgroundCss} className="header">
				<div className="container">
					{leftContent || <Link to="/" className="pull-left">
						<img src={logo} alt="ANET logo" style={logoCss} />
					</Link>}

					<div className="pull-left header-content">
						{middleContent || <SearchBar />}
					</div>

					<div className="pull-right">
						{rightContent || <CreateButton />}
					</div>
				</div>
			</header>
		)
	}
}

let InjectableHeader = null
let ContentForHeader = null
if (process.env.NODE_ENV === 'test') {
	ContentForHeader = function(props) {
		return <div />
	}
} else {
	// this is some magic around the Injectable library to allow
	// components further down the tree to inject children into the header
	InjectableHeader = Injectable(Header)

	const HeaderInjector = Injector({into: InjectableHeader})
	ContentForHeader = function(props) {
		let {children, ...childProps} = props
		let Component = HeaderInjector(function() { return children })
		return <Component {...childProps} />
	}
}

export default InjectableHeader
export {ContentForHeader}

@@ -66,16 +66,63 @@
 router'%0A
+import %7BGrid, Row, Col%7D from 'react-bootstrap'%0A
 import %7B
@@ -1014,35 +1014,46 @@
 %09%09%09%3C
-div className=%22container%22%3E%0A
+Grid%3E%0A%09%09%09%09%09%3CRow%3E%0A%09%09%09%09%09%09%3CCol xs=%7B3%7D%3E%0A%09%09
 %09%09%09%09
@@ -1085,38 +1085,16 @@
 =%22/%22
- className=%22pull-left%22
 %3E%0A%09%09%09%09%09%09
 %3Cimg
@@ -1089,16 +1089,18 @@
 %3E%0A%09%09%09%09%09%09
+%09%09
 %3Cimg src
@@ -1147,16 +1147,18 @@
 /%3E%0A%09%09%09%09%09
+%09%09
 %3C/Link%3E%7D
@@ -1162,57 +1162,42 @@
 k%3E%7D%0A
-%0A%09%09%09%09%09%3Cdiv className=%22pull-left header-content%22
+%09%09%09%09%09%09%3C/Col%3E%0A%0A%09%09%09%09%09%09%3CCol xs=%7B7%7D
 %3E%0A
+%09
 %09%09%09%09
@@ -1240,16 +1240,38 @@
 %09%09%09%09
+%09
 %3C/
-div
+Col
 %3E%0A%0A
+%09%09%09%09%09%09%3CCol xs=%7B2%7D%3E%0A%09%09
 %09%09%09%09
@@ -1300,16 +1300,18 @@
 right%22%3E%0A
+%09%09
 %09%09%09%09%09%09%7Br
@@ -1344,24 +1344,26 @@
 on /%3E%7D%0A%09%09%09%09%09
+%09
+%09
 %3C/div%3E%0A%09%09%09%09%3C
@@ -1357,29 +1357,55 @@
 %09%3C/div%3E%0A%09%09%09%09
-%3C/div
+%09%09%3C/Col%3E%0A%09%09%09%09%09%3C/Row%3E%0A%09%09%09%09%3C/Grid
 %3E%0A%09%09%09%3C/heade

Move Header components into a grid