import React, {Component} from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';

import CircularLoading from '../CircularLoading';

import Event from '../_vendors/Event';
import Dom from '../_vendors/Dom';

import './LazyImage.css';

export default class LazyImage extends Component {

    constructor(props) {

        super(props);

        this.state = {
            imageState: 0
        };

        this.scrollHandle = this::this.scrollHandle;
        this.debounceScrollHandle = _.debounce(this::this.debounceScrollHandle, 150);

    }

    debounceScrollHandle() {

        if (!this.wrapperEl) {
            return;
        }

        if (this.wrapperEl.getBoundingClientRect().top < window.innerHeight) {

            this.setState({
                imageState: 1
            }, () => {

                const image = new Image();

                // image.onload = () => {
                //     this.setState({
                //         imageState: 2
                //     });
                // };

                Event.addEvent(image, 'load', () => {
                    this.setState({
                        imageState: 2
                    });
                });

                image.src = this.props.src;

            });

        }

    }

    scrollHandle(e) {

        if (this.state.imageState > 0) {
            return;
        }

        console.log(0);

        this.debounceScrollHandle(e);

    }

    componentDidMount() {

        this.wrapperEl = this.refs.wrapper;

        Event.addEvent(document, 'scroll', this.scrollHandle);

    }

    componentWillUnmount() {
        Event.removeEvent(document, 'scroll', this.scrollHandle);
    }

    render() {

        const {className, style, src, alt, loadingWidth, loadingHeight, width, height, placeholder} = this.props,
            {imageState} = this.state,

            lazyImageClassName = (className ? ' ' + className : ''),
            lazyImageStyle = {
                ...style,
                width: imageState === 2 ? width : loadingWidth,
                height: imageState === 2 ? height : loadingHeight
            };

        return (
            <div ref="wrapper"
                 className={'lazy-image' + lazyImageClassName}
                 style={lazyImageStyle}>

                <img className="lazy-image-img"
                     src={imageState === 2 ? src : ''}
                     alt={alt}
                     width={width}
                     height={height}/>

                <div className={'lazy-image-placeholder' + (imageState === 2 ? ' hidden' : '')}>
                    {
                        placeholder ?
                            {placeholder}
                            :
                            <CircularLoading className="lazy-image-loading"/>
                    }
                </div>

            </div>
        );

    }
};

LazyImage.propTypes = {

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,

    /**
     * Image src url.
     */
    src: PropTypes.string.isRequired,

    /**
     * Image alt text.
     */
    alt: PropTypes.string,

    /**
     * Loading width.
     */
    loadingWidth: PropTypes.number,

    /**
     * Loading height.
     */
    loadingHeight: PropTypes.number,

    /**
     * Image width.
     */
    width: PropTypes.number,

    /**
     * Image height.
     */
    height: PropTypes.number,

    /**
     * Image placeholder.
     */
    placeholder: PropTypes.any

};

LazyImage.defaultProps = {

    className: '',
    style: null,

    alt: '',

    loadingWidth: 100,
    loadingHeight: 100,

    placeholder: ''

};
@@ -744,163 +744,227 @@
     
-this.setState(%7B%0A                imageState: 1%0A            %7D, () =%3E %7B%0A%0A                const image = new Image();%0A%0A                // image.onload = () =%3E %7B
+const %7BonImageLoadStart%7D = this.props;%0A            let result;%0A%0A            if (onImageLoadStart) %7B%0A                result = onImageLoadStart();%0A            %7D%0A%0A            if (result === false) %7B%0A                return;
 %0A   
@@ -968,30 +968,34 @@
             
+%7D%0A%0A
     
-//
+   
      this.se
@@ -1006,35 +1006,24 @@
 te(%7B%0A       
-         //
          ima
@@ -1023,33 +1023,33 @@
     imageState: 
-2
+1
 %0A               
@@ -1049,23 +1049,26 @@
     
-    //
+%7D, () =%3E %7B%0A%0A 
      
-%7D);%0A
     
@@ -1077,18 +1077,33 @@
     
-      // %7D
+const image = new Image()
 ;%0A%0A 
@@ -1147,18 +1147,17 @@
 'load', 
-()
+e
  =%3E %7B%0A  
@@ -1228,16 +1228,166 @@
 tate: 2%0A
+                    %7D, () =%3E %7B%0A                        const %7BonImageLoaded%7D = this.props;%0A                        onImageLoaded && onImageLoaded(e);%0A
         
@@ -1602,33 +1602,8 @@
  %7D%0A%0A
-        console.log(0);%0A%0A
     
@@ -3805,16 +3805,189 @@
 ypes.any
+,%0A%0A    /**%0A     * Image load start callback.%0A     */%0A    onImageLoadStart: PropTypes.func,%0A%0A    /**%0A     * Image load end callback.%0A     */%0A    onImageLoaded: PropTypes.func
 %0A%0A%7D;%0A%0ALa

update LazyImage