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

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

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

class NavigationDropdown 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 { primary, children, activeText, style } = this.props;
    const { open } = this.state;
    const classes = classNames({
      [styles.dropdown]: true
    });

    return (
      <div className={classes} style={style}>
        <MediaQuery smallerThan medium>
          <div style={{ marginTop: 10 }}>
            <div onClick={this.toggleOpen} style={{ display: 'inline-block', height: 48, width: 22, position: 'relative', padding: '0 0 0 7px' }}>
              <Icon white name="doka-icon-menu" style={{ position: 'absolute', top: 6 }} />
            </div>
            <Menu primary open={open} triangle shadow style={{ position: 'fixed', right: 0, width: '100%' }}>
              {children}
            </Menu>
          </div>
        </MediaQuery>
        <MediaQuery medium>
          <div style={{ marginTop: 34 }}>
            <div onClick={this.toggleOpen} style={{ position: 'relative', top: -20, fontSize: 16, border: 'solid 1px #fff', cursor: 'pointer', display: 'inline-block', height: 18, minWidth: 250, maxWidth: 250, padding: '6px 10px 12px' }}>
              {activeText}
              <Icon white style={{ position: 'absolute', right: 10, top: 5 }} small name={open ? 'doka-icon-closeinline' : 'doka-icon-openinline'} />
            </div>
            <Menu primary={primary} triangle shadow open={open} style={{ position: 'absolute', left: -19, width: 250 }}>
              {children}
            </Menu>
          </div>
        </MediaQuery>
      </div>
    );
  }
}

export default enhanceWithClickOutside(NavigationDropdown);