import React, { PureComponent } from 'react';
import classNames from 'classnames';
import enhanceWithClickOutside from 'react-click-outside';

import '../base';
import styles from './InboxDropdown.styl';

import Menu from '../atoms/Menu';
import Icon from '../atoms/Icon';
import InboxIcon from '../atoms/InboxIcon';
import MediaQuery from '../atoms/MediaQuery';
import MediaObject from '../atoms/MediaObject';

class InboxDropdown extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      open: props.open || false
    };

    this.toggleOpen = this.toggleOpen.bind(this);
  }

  toggleOpen(state) {
    this.setState({ open: typeof state === 'boolean' ? state : !this.state.open });
  }

  handleClickOutside() {
    this.toggleOpen(false);
  }

  render() {
    const { children, style, onDismissAll, ...props } = this.props;
    const { open } = this.state;

    const wrapperClasses = classNames({
      [styles.dropdown]: true
    });

    const iconClasses = classNames({
      [styles.icon]: true
    });

    const headerClasses = classNames({
      [styles.header]: true
    });

    const headerTextClasses = classNames({
      [styles.headerText]: true
    });

    const Header = (
      <div className={headerClasses}>
        <MediaObject
          reverse
          center
          figure={onDismissAll && (
            <div onClick={onDismissAll} style={{ marginRight: 10, cursor: 'pointer' }}>
              <Icon name="doka-icon-allread" />
            </div>
          )}
        >
          <div className={headerTextClasses}>Notifications</div>
        </MediaObject>
      </div>
    );

    return (
      <div className={wrapperClasses} style={style}>
        <div className={iconClasses}>
          <InboxIcon {...props} onClick={this.toggleOpen} />
        </div>
        <MediaQuery smallerThan small>
          <Menu primary open={open} triangle triangleCentered shadow defaultHeight={window.innerHeight - 60} style={{ position: 'fixed', right: 0, width: '100%', background: '#fff', overflowX: 'hidden', overflowY: 'auto' }}>
            {Header}
            {children}
          </Menu>
        </MediaQuery>
        <MediaQuery small>
          <Menu primary open={open} triangle shadow defaultHeight={window.innerHeight - 60} style={{ position: 'absolute', right: -20, width: 350, background: '#fff', overflowX: 'hidden', overflowY: 'auto' }}>
            {Header}
            {children}
          </Menu>
        </MediaQuery>
      </div>
    );
  }
}

export default enhanceWithClickOutside(InboxDropdown);