const React = require('react');
const builder = require('focus').component.builder;
const types = require('focus').component.types;
const Button = require('../../button/action').component;
const i18nMixin = require('../../i18n/mixin');
const stylableMixin = require('../../../mixin/stylable');
const {scrollTo, scrollPosition} = require('../../mixin/scroll');

/**
* Mixin button.
* @type {Object}
*/
const backToTopMixin = {
    displayName: 'ButtonBackToTop',
    mixins: [i18nMixin, stylableMixin],
    /** inheritedDoc */
    getDefaultProps() {
        return {
            iconPrefix: 'fa fa-',
            iconName: 'arrow-circle-up',
            duration: 100,
            scrollStart: 100
        };
    },
    /**
    * Props validation
    */
    propTypes: {
        iconPrefix: types('string'),
        iconName: types('string'),
        duration: types('number'),
        scrollStart: types('number')
    },
    /** inheritedDoc */
    getInitialState() {
        return {
            isVisible: false
        };
    },
    /**
    * Component did mount, attach the scroll spy
    */
    componentDidMount() {
        this._scrollCarrier = window;
        this._scrollCarrier.addEventListener('scroll', this._scrollSpy);
        this._scrollCarrier.addEventListener('resize', this._scrollSpy);
        this._scrollSpy();
        console.debug('did mount');
    },
    componentWillUnMount() {
        this._scrollCarrier.removeEventListener('scroll', this._scrollSpy);
        this._scrollCarrier.removeEventListener('resize', this._scrollSpy);
        console.debug('will unmount');
    },
    /**
    * The scroll event handler
    * @private
    */
    _scrollSpy() {
        console.debug('scrollspy');
        const currentScrollPosition = scrollPosition();
        if (currentScrollPosition.top > this.props.scrollStart) {
            if (!this.state.isVisible) {
                this.setState({isVisible: true});
            }
        } else {
            if (this.state.isVisible) {
                this.setState({isVisible: false});
            }
        }
    },
    /**
    * Go back to the top of the page.
    */
    goBackToTop() {
        //TODO: Add animation
        scrollTo(undefined, 0);
    },
    /** inheritedDoc */
    render() {
        const {isVisible} = this.state;
        return isVisible ? <div data-focus='back-to-top'><Button icon='expand_less' label={this.i18n('button.backTop')} onClick={this.goBackToTop} shape='icon' /></div> : null;
    }
};

module.exports = builder(backToTopMixin);

@@ -1332,51 +1332,15 @@
 ();%0A
-        console.debug('did mount');%0A
     %7D,%0A
+
     
@@ -1520,47 +1520,8 @@
 y);%0A
-        console.debug('will unmount');%0A
     
@@ -1580,24 +1580,24 @@
 vate%0A    */%0A
+
     _scrollS
@@ -1607,44 +1607,8 @@
 ) %7B%0A
-        console.debug('scrollspy');%0A
     

Remove logs