import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { switchOption } from '../actions/index';

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class PropertyColumn extends Component {
	constructor(props) {
		super(props);

		this.state = {className: 'hidden'};
	}

	render() {
		var activeOption = null;

		this.props.options.forEach(function(option) {
			if (option.active) {
				activeOption = option;
			}
		});

		return (
			<div>
				<img src={activeOption.image_url} />
				<h2>{activeOption.name}</h2>
				<p>{activeOption.description}</p>
				<a onClick={() => this.showOptions()} href='#' className={"btn btn-primary"}>Change</a>

				<ReactCSSTransitionGroup
	            	transitionName="example"
	            	className= {this.state.className}
	            	transitionEnterTimeout={300}
	            	transitionLeaveTimeout={300}
	            	component='ul'>
					{this.listOptions()}
				</ReactCSSTransitionGroup>
			</div>
		)
	}

	listOptions() {
		return this.props.options.map((option, i) => {
			return (
				<li onClick={() => this.props.switchOption(this.props.data, this.props.columnId, i)} key={option.id}>{option.name}</li>
			)
		})
	}

	showOptions() {
		if (this.state.className == 'visible') {
			this.setState({className: 'hidden'})
		} else {
			this.setState({className: 'visible'})
		}
	}
}

function mapStateToProps(state) {
	return {
		data: state.data
	}
}

function mapDispatchToProps(dispatch) {
	return bindActionCreators({ switchOption }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(PropertyColumn)

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}