import React, { PropTypes } from 'react'
import FontAwesome from 'react-fontawesome'

import Icon from '../Icon'
import * as helpers from '../../helpers'

export default class SearchSettingsModal extends React.Component{

	constructor(props){
		super(props)

		this.state = {
			spotify: true,
			uri_schemes: []
		}
	}

	componentDidMount(){
		if (this.props.search_settings){
			this.setState(this.props.search_settings)
		} else {
			this.setState({
				spotify: true,
				uri_schemes: this.props.uri_schemes
			})
		}
	}

	handleSubmit(e){
		this.props.uiActions.set({search_settings: this.state})
		this.props.uiActions.closeModal()
		this.props.uiActions.startSearch(this.props.data.type, this.props.data.query)
	}

	handleToggle(scheme){
		var uri_schemes = this.state.uri_schemes
		var index = uri_schemes.indexOf(scheme)

		if (index > -1){
			uri_schemes.splice(index,1)
		} else {
			uri_schemes.push(scheme)
		}

		this.setState({uri_schemes: uri_schemes})
	}

	render(){
		return (
			<div>
				<h4 className="no-bottom-padding">Advanced search settings</h4>
				<h3 className="grey-text bottom-padding">Customise the providers used when searching. Only Spotify and local backends support searching by artist, album or playlist.</h3>

				<form onSubmit={e => this.handleSubmit(e)}>
					<div className="field checkbox white">
						<label>
							<input 
								type="checkbox"
								name="enabled"
								checked={ this.state.spotify }
								onChange={ e => this.setState({ spotify: !this.state.spotify })} />
							<span className="label">spotify <span className="grey-text">(http)</span></span>
						</label>
					</div>
					{
						this.props.uri_schemes.map(scheme => {
							return (								
								<div className="field checkbox white" key={scheme}>
									<label>
										<input 
											type="checkbox"
											name={scheme}
											checked={this.state.uri_schemes.indexOf(scheme) > -1}
											onChange={ e => this.handleToggle(scheme)} />
										<span className="label">{scheme.replace(':','')} <span className="grey-text">(mopidy)</span></span>
									</label>
								</div>
							)
						})
					}

					<div className="actions centered-text">
						<button type="submit" className="primary wide">Save</button>
					</div>
				</form>
			</div>
		)
	}
}