import React from 'react';
import {Form, FormGroup, FormControl} from 'react-bootstrap'
import _ from 'lodash';
import Genres from './Books/BooksGenres'
import BooksList from './BooksList';
import Generator from './Generator/Generator';
import Books from './Books/Books';

import Worker from 'worker?inline!./BooksManagerWorker.js';


var worker = new Worker();

export default React.createClass({

	componentWillMount: function() {
		Generator.registerUpdateHandler(({progress}) => {
			if (progress === 100)
				this.fetchBooks();
		});

		this.updateFilter = _.debounce(this.updateFilter, 300);
	},


	getInitialState: function () {
		return {
			books: [],
			filters: {},
			sortOptions: {},
			filteredBooks: [],
			processing: false
		}
	},


	updateFilter: function(name, value) {
		var filters = JSON.parse(JSON.stringify(this.state.filters));
		filters[name] = value;

		this.fetchBooks(filters, this.state.sortOptions);
	},


	updateSortOptions: function(options) {
		this.fetchBooks(this.state.filters, options);
	},

	fetchBooks: function(filters, sortOptions) {
		filters = filters || this.state.filters;
		sortOptions = sortOptions || this.state.sortOptions;

		this.setState({
			processing: true,
			filters: filters,
			sortOptions: sortOptions
		});

		worker.terminate();
		worker = new Worker();
		worker.onmessage = (e) => {
			this.setState({
				books: e.data,
				processing: false
			})
		};

		worker.postMessage({
			filters: filters,
			sortOptions: sortOptions,
			books: Books.getJSON()
		});
	},

	render: function () {
		return (
			<div>
				<Form inline onSubmit={e => e.preventDefault()}>
					<FormGroup>
						<FormControl
							type="text"
							data-name="filterAuthorName"
							value={this.state.authorName}
							placeholder="Author name"
							onChange={e => this.updateFilter(e.target.dataset.name, e.target.value)}/>
						<FormControl
							type="text"
							data-name="filterBookTitle"
							value={this.state.bookTitle}
							placeholder="Book title"
							onChange={e => this.updateFilter(e.target.dataset.name, e.target.value)}/>
						<FormControl
							componentClass="select"
							data-name="filterAuthorGender"
							onChange={e => this.updateFilter(e.target.dataset.name, e.target.value)}>
							<option value="">Author gender</option>
							<option value="Male">Male</option>
							<option value="Female">Female</option>
						</FormControl>
						<FormControl
							componentClass="select"
							data-name="filterBookGenre"
							onChange={e => this.updateFilter(e.target.dataset.name, e.target.value)}>
							<option value="">Book genre</option>
							{Genres.map(function (genre, i) {
								return <option key={i} value={genre}>{genre}</option>
							})}
						</FormControl>
						<FormControl
							componentClass="select"
							data-name="filterBookType"
							onChange={e => this.updateFilter(e.target.dataset.name, e.target.value)}>
							<option value="">Special Book Type</option>
							<option value="isHalloweenBook">Halloween Book</option>
							<option value="isFridayFinanceBook">Friday Finance Book</option>
						</FormControl>
					</FormGroup>
				</Form>

				<BooksList
					books={this.state.books}
					sortOptions={this.state.sortOptions}
					updateSortOptions={this.updateSortOptions}
					processing={this.state.processing}/>

			</div>
		)
	}
});

