import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as courseActions from '../../actions/courseActions';
import CourseForm from './CourseForm';
import {authorsFormattedForDropdown} from '../../selectors/selectors';
import toastr from 'toastr';

export class ManageCoursePage extends React.Component {
	constructor(props, context) {
		super(props, context);

		this.state = {
			course: Object.assign({}, props.course),
			errors: {},
			saving: false
		};

		this.updateCourseState = this.updateCourseState.bind(this);
		this.saveCourse = this.saveCourse.bind(this);

	}

	componentWillReceiveProps(nextProps) {
		if (this.props.course.id != nextProps.course.id) {
			// Necessary to populate form when existing course is loaded directly.
			this.setState({course: Object.assign({}, nextProps.course)});
		}
	}

	updateCourseState(event) { // handler for each form field
		const field = event.target.name;
		let course = this.state.course;
		course[field] = event.target.value;
		return this.setState({course: course});
	}

	courseFormValid() {
		let formIsValid = true;
		let errors = {};

		if (this.state.course.title.length < 5) {
			errors.title = 'Title must be at least 5 characters.';
			formIsValid = false;
		}

		this.setState({errors: errors});
		return formIsValid;
	}

	saveCourse(event) {
		event.preventDefault();

		if (!this.courseFormValid()) {
			return;
		}

		this.setState({saving: true});
		this.props.actions.saveCourse(this.state.course)
			.then(() => this.redirect())
			.catch(error => {
				toastr.error(error);
				this.setState({saving: false});
			});
	}

	redirect() {
		// redirect to courses route
		this.setState({saving: false});
		toastr.success('Course saved!');
		this.context.router.push('/courses');
	}

	render() {
		return (
				<CourseForm allAuthors={this.props.authors}
					onChange={this.updateCourseState}
					onSave={this.saveCourse}
					errors={this.state.errors}
					course={this.state.course}
					saving={this.state.saving}/>
		);
	}
}

ManageCoursePage.propTypes = {
	course: PropTypes.object.isRequired,
	authors: PropTypes.array.isRequired,
	actions: PropTypes.object.isRequired
};

//Pull in the React Router context so router is available on this.context.router.
ManageCoursePage.contextTypes = {
	router: PropTypes.object
};

function getCourseById(courses, id) {
	const course = courses.filter(course => course.id == id);
	if (course.length) return course[0]; //since filter returns an array, have to grab the first.
	return null;
}

function mapStateToProps(state, ownProps) {
	let course = {
		id: "",
		title: "",
		watchHref: "",
		authorId: "",
		length: "23",
		category: ""
	};
	const courseId = ownProps.params.id; // from the path `/course/:id`

	if (courseId && state.courses.length > 0) {
		course = getCourseById(state.courses, courseId);
	}

	return {
		course: course,
		authors: authorsFormattedForDropdown(state.authors)
	}
}

function mapDispatchToProps(dispatch) {
	return {
		actions: bindActionCreators(courseActions, dispatch)
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage);
