import React from 'react';
import cx from 'classnames';
import { cookie as cookieLite } from 'browser-cookie-lite';
import styleUtils from './styleUtils';

const propTypes = {
  message: React.PropTypes.string,
  onAccept: React.PropTypes.func,
  link: React.PropTypes.shape({
    msg: React.PropTypes.string,
    url: React.PropTypes.string.isRequired,
  }),
  buttonMessage: React.PropTypes.string,
  cookie: React.PropTypes.string,
  dismissOnScroll: React.PropTypes.bool,
  dismissOnScrollThreshold: React.PropTypes.number,
  closeIcon: React.PropTypes.string,
  disableStyle: React.PropTypes.bool,
  styles: React.PropTypes.object,
  children: React.PropTypes.element,
  className: React.PropTypes.string
};

export default React.createClass({

  displayName: 'CookieBanner',

  propTypes: propTypes,

  getDefaultProps() {
    return {
      onAccept: () => {},
      dismissOnScroll: true,
      cookie: 'accepts-cookies',
      buttonMessage: 'Got it',
      className: '',
      dismissOnScrollThreshold: 0
    };
  },

  getInitialState() {
    return {
      listeningScroll: this.props.dismissOnScroll
    };
  },

  componentDidMount() {
    if (!this.acceptsCookies() && this.props.dismissOnScroll) {
      window.onscroll = this.onScroll;
    }
  },

  onScroll() {
    // tacit agreement buahaha! (evil laugh)
    if (window.pageYOffset > this.props.dismissOnScrollThreshold) {
      this.onAccept();
    }
  },

  onAccept() {
    cookie(this.props.cookie, true);
    this.props.onAccept({cookie: this.props.cookie});
    if (this.props.dismissOnScroll) {
      window.onscroll = null;
      this.setState({listeningScroll: false});
    }
  },

  getStyle(style) {
    if (!this.props.disableStyle) {
      let styles = styleUtils.getStyle(style);
      // apply custom styles if available
      if (this.props.styles && this.props.styles[style]) {
        Object.assign(styles, this.props.styles[style]);
      }
      return styles;
    }
  },

  getCloseButton() {
    if (this.props.closeIcon) {
      return <i className={this.props.closeIcon} onClick={this.onAccept} style={this.getStyle('icon')}/>;
    }
    return (
      <div className='button-close' onClick={this.onAccept} style={this.getStyle('button')}>
        {this.props.buttonMessage}
      </div>
    );
  },

  getLink() {
    if (this.props.link) {
      return (
        <a
          href={this.props.link.url}
          className='cookie-link'
          style={this.getStyle('link')}>
            {this.props.link.msg || 'Learn more'}
        </a>
      );
    }
  },

  getBanner() {
    if (this.props.children) {
      return this.props.children;
    }
    return (
      <div {...props} className={cx('react-cookie-banner', className)} style={this.getStyle('banner')}>
        <span className='cookie-message' style={this.getStyle('message')}>
          {this.props.message}
          {this.getLink()}
        </span>
        {this.getCloseButton()}
      </div>
    );
  },

  acceptsCookies() {
    return (typeof window !== 'undefined') && cookie(this.props.cookie);
  },

  render() {
    return this.acceptsCookies() ? null : this.getBanner();
  },

  componentWillReceiveProps(nextProps) {
    if (!this.acceptsCookies() && nextProps.dismissOnScroll && !this.state.listeningScroll) {
      window.onscroll = this.onScroll;
      this.setState({listeningScroll: true});
    }
  },

});

export default CookieBanner;

@@ -958,29 +958,8 @@
 t',%0A
-      className: '',%0A
     
@@ -987,16 +987,34 @@
 shold: 0
+,%0A      styles: %7B%7D
 %0A    %7D;%0A
@@ -1081,34 +1081,13 @@
 ll: 
-this.props.dismissOnScroll
+false
 %0A   
@@ -1116,24 +1116,88 @@
 idMount() %7B%0A
+    this.addOnScrollListener();%0A  %7D,%0A%0A  addOnScrollListener() %7B%0A
     if (!thi
@@ -1236,32 +1236,63 @@
 .dismissOnScroll
+ && !this.state.listeningScroll
 ) %7B%0A      window
@@ -1289,39 +1289,660 @@
     
+if (
 window.
-onscroll = this.onScroll
+attachEvent) %7B%0A        //Internet Explorer%0A        window.attachEvent('onmousewheel', this.onScroll);%0A      %7D else if(window.addEventListener) %7B%0A        window.addEventListener('mousewheel', this.onScroll, false);%0A      %7D%0A      this.setState(%7B listeningScroll: true %7D);%0A    %7D%0A  %7D,%0A%0A  removeOnScrollListener() %7B%0A    if (this.state.listeningScroll) %7B%0A      if (window.detachEvent) %7B%0A        //Internet Explorer%0A        window.detachEvent('onmousewheel', this.onScroll);%0A      %7D else if(window.removeEventListener) %7B%0A        window.removeEventListener('mousewheel', this.onScroll, false);%0A      %7D%0A      this.setState(%7B listeningScroll: false %7D)
 ;%0A  
@@ -2139,97 +2139,107 @@
   co
-okie(this.props.cookie, true);%0A    this.props.onAccept(%7Bcookie: this.props.
+nst %7B cookie, onAccept %7D = this.props;%0A    cookieLite(cookie, true);%0A    onAccept(%7B 
 cookie
+ 
 %7D);%0A    
 if (
@@ -2238,124 +2238,38 @@
     
-if (
 this.
-props.dismissOnScroll) %7B%0A      window.onscroll = null;%0A      this.setState(%7BlisteningScroll: false%7D);%0A    %7D
+removeOnScrollListener();
 %0A  %7D
@@ -3807,225 +3807,108 @@
     
-if (!
 this.a
-cceptsCookies() && nextProps.dismissOnScroll && !this.state.listeningScroll) %7B%0A      window.onscroll = this.onScroll;%0A      this.setState(%7BlisteningScroll: true%7D
+ddOnScrollListener();%0A  %7D,%0A%0A  componentWillUnmount() %7B%0A    this.removeOnScrollListener(
 );%0A
-  
   %7D%0A
-  %7D,%0A%0A%7D);%0A%0Aexport default CookieBanner;%0A
+%0A%7D);

use browser utility function to add and remove scroll listener;