import React,{PropTypes} from 'react';
import ReactDom from 'react-dom'
import Member from './Member';
import cx from 'classnames'; 
import s from './MyList.scss'; 


class MyList extends React.Component {
    constructor(props) {
        super(props);    
        this.state={
        }
    }
 
	render() {
		const {itemRender,items}= this.props;

		return <div scrollTop={300}>{items.map(itemRender)}</div>;
	}

	renderItem(item) {
		var active = item.name === this.props.activeId;
		var props = {
			key: item.uuid,
			item: item,
			active: active
		};
		if (active) {
			console.log(this.props.activeId);
			props.ref = "activeItem";
		}
		let letter = 'A';
		const {onChoose, onChange,choiceType}= this.props;
		const key = item.uuid;

		return(	<div key={key} className={cx(s.letter_wrap)} {...props}>
				{letter.length>0&&
					<a key={key} name ={'#index#'+letter} id={'#index#'+letter}>
						{letter}
					</a>
				}
				<Member checked={false} myself={false}
				imageUrl='http://localhost:3001/./img/user.jpg' name={item.name} uuid={item.uuid} onClick={onChoose} onChange={onChange} choiceType={choiceType}/>
			</div>);

//		return <div {...props}> {item.name} </div>
	}

	componentDidUpdate(prevProps) {
		// only scroll into view if the active item changed last render
		console.log(this.props.activeId);
		console.log(prevProps.activeId);
		if (this.props.activeId != prevProps.activeId) {
			this.ensureActiveItemVisible();
		}
		
	}

	ensureActiveItemVisible() {
		var itemComponent = this.refs.activeItem;
		if (itemComponent) {
			var domNode = ReactDom.findDOMNode(itemComponent);
			console.log(domNode);
//			this.scrollTop = domNode.offsetTop;
			domNode.scrollIntoView(false);
			//domNode.scrollTop();
//			this.scrollElementIntoViewIfNeeded(domNode);
		}
	}

	scrollElementIntoViewIfNeeded(domNode) {
		var containerDomNode = ReactDom.findDOMNode(this);
		// Determine if `domNode` fully fits inside `containerDomNode`.
		// If not, set the container's scrollTop appropriately.
		console.log(domNode.offsetTop);
		//window.scrollTo(0, 300);
		//containerDomNode.scrollTop = domNode.offsetTop;
	}
}

export default MyList;