import React,{PropTypes} from 'react';   
import cx from 'classnames'; 
import s from './PhotoView.scss';   
import {choicePhoto} from '../../redux/actions/chat';

export class PhotoView extends React.Component { 
	constructor(props) {
        super(props);
        this.closePhotoView=this.closePhotoView.bind(this);
        this.showLage=this.showLage.bind(this);
        this.showSmal=this.showSmal.bind(this);
		this.state={
			photoSize:'sm'
		}
    }
    static propTypes = { 
		photo:PropTypes.object,
		dispatch:PropTypes.func 
	}  
	componentDidMount(){
	} 
    componentWillReceiveProps(nextProps){ 
    }
	componentWillUnmount() { 
	}   
	showLage(e){
		this.setState({
			photoSize:'lg'
		})
		e.preventDefault()
	}
	showSmal(e){
		this.setState({
			photoSize:'sm'
		})
		e.preventDefault()
	}
	closePhotoView(e){
		const {dispatch}=this.props;
		dispatch(choicePhoto({}));
	}
    render(){  
    	const {photo}=this.props;
    	const {photoSize}=this.state;
    	return(
			<div className={cx(s.photo_view_wrap)}>
				<header className={cx(s.viewer_header)}>
					<div className={cx(s.controls)}>
						{/*<a target="form_photo" href={photo.imgUrl} title='下载' className={cx('ts_icon','ts_icon_cloud_download',s.file_ssb_download_link)}></a>*/}
						<a onClick={this.closePhotoView} title="关闭" className={cx(s.close_btn,'ts_icon','ts_icon_times')}></a>
					</div>
				</header>
				<div className={cx(s.viewer)} style={{'overflow':'sm'==photoSize?'hidden':'auto'}}>
					<figure className={cx(s.scaled)} style={{'visibility':'sm'==photoSize?'visible':'hidden'}}>
						<img src={photo.imgUrl} className={cx(s.scaled_image)}  onClick={this.showLage}/>
					</figure>
					<figure className={cx(s.actual_pixel)}  style={{'visibility':'lg'==photoSize?'visible':'hidden'}}>
						<div className={cx(s.actual_pixel_center)}  onClick={this.showSmal}>
							<img src={photo.imgUrl} className={cx(s.actual_pixel_image)} />
						</div>
					</figure>
				</div> 
			</div>
		);
	}
} 

export default PhotoView