import React, {Component, PropTypes} from 'react'
import autobind from 'autobind-decorator'
import {Checkbox} from 'react-bootstrap'
import 'utils'
import Autocomplete from 'components/Autocomplete'

export default class OrganizationFilter extends Component {
	static propTypes = {
		//An Autocomplete filter allows users to search the ANET database
		// for existing records and use that records ID as the search term.
		// the filterKey property tells this filter what property to set on the
		// search query. (ie authorId, organizationId, etc)
		queryKey: PropTypes.string.isRequired,
		queryIncludeChildOrgsKey: PropTypes.string.isRequired,

		//Passed by the SearchFilter row
		value: PropTypes.any,
		onChange: PropTypes.func,

		//All other properties are passed directly to the Autocomplete.

	}

	constructor(props) {
		super(props)

		this.state = {
			value: props.value || {},
			includeChildOrgs: props.value.includeChildOrgs || false,
		}
	}

	@autobind
	toQuery() {
		return {
			[this.props.queryKey]: this.state.value.id,
			[this.props.queryIncludeChildOrgsKey]: this.state.includeChildOrgs,
		}
	}

	render() {
		let autocompleteProps = Object.without(this.props, 'value', 'queryKey', 'queryIncludeChildOrgsKey')
		console.log("rendering org auto", this.props.queryKey, this.value)
		return <div>
			<Autocomplete
				{...autocompleteProps}
				onChange={this.onChange}
				value={this.state.value}
			/>
			<Checkbox inline value={this.state.includeChildOrgs} onChange={this.toggleChild}>Include children organizations</Checkbox>
		</div>
	}

	@autobind
	toggleChild() {
		this.setState({includeChildOrgs: !this.state.includeChildOrgs}, this.updateFilter)
	}

	@autobind
	onChange(event) {
		this.setState({value: event}, this.updateFilter)
	}

	@autobind
	updateFilter() {
		let value = this.state.value
		value.includeChildOrgs = this.state.includeChildOrgs
		value.toQuery = this.toQuery
		this.props.onChange(value)
	}
}

@@ -955,169 +955,8 @@
 %09%7D%0A%0A
-%09@autobind%0A%09toQuery() %7B%0A%09%09return %7B%0A%09%09%09%5Bthis.props.queryKey%5D: this.state.value.id,%0A%09%09%09%5Bthis.props.queryIncludeChildOrgsKey%5D: this.state.includeChildOrgs,%0A%09%09%7D%0A%09%7D%0A%0A
 %09ren
@@ -1069,76 +1069,8 @@
 y')%0A
-%09%09console.log(%22rendering org auto%22, this.props.queryKey, this.value)
 %0A%09%09r
@@ -1146,21 +1146,27 @@
 %7Bthis.on
-Chang
+Autocomplet
 e%7D%0A%09%09%09%09v
@@ -1195,16 +1195,17 @@
 %7D%0A%09%09%09/%3E%0A
+%0A
 %09%09%09%3CChec
@@ -1216,21 +1216,23 @@
  inline 
-value
+checked
 =%7Bthis.s
@@ -1273,21 +1273,36 @@
 his.
-toggleChild%7D%3E
+changeIncludeChildren%7D%3E%0A%09%09%09%09
 Incl
@@ -1327,16 +1327,20 @@
 izations
+%0A%09%09%09
 %3C/Checkb
@@ -1372,20 +1372,35 @@
 nd%0A%09
-toggleChild(
+changeIncludeChildren(event
 ) %7B%0A
@@ -1438,36 +1438,28 @@
 gs: 
-!this.state.includeChildOrgs
+event.target.checked
 %7D, t
@@ -1494,21 +1494,27 @@
 bind%0A%09on
-Chang
+Autocomplet
 e(event)
@@ -1563,32 +1563,193 @@
 dateFilter)%0A%09%7D%0A%0A
+%09@autobind%0A%09toQuery() %7B%0A%09%09return %7B%0A%09%09%09%5Bthis.props.queryKey%5D: this.state.value.id,%0A%09%09%09%5Bthis.props.queryIncludeChildOrgsKey%5D: this.state.includeChildOrgs,%0A%09%09%7D%0A%09%7D%0A%0A
 %09@autobind%0A%09upda

Fix "Include children" checkbox on organization filter not maintaining state