import React, {Component} from 'react'
import {connect} from 'react-redux'
import classNames from 'classnames/bind'
import {MdClose} from 'react-icons/lib/md'
import {color} from 'common/constants'
import auto_bind from 'common/auto_bind'
import event_system from 'common/event_system'
import {dismiss_popover} from 'actions/display'

const cx = classNames.bind(require('styles/popover.scss'))

export class PopoverStatic extends Component {
  constructor(props) {
    super(props)
    auto_bind(this)
  }

  dismiss_popover() {
    event_system.trigger("dismiss_popover")
    event_system.cancel_all("dismiss_popover")
    this.props.dismiss_popover()
  }

  render() {
    if (this.props.component) {
      return (
        <div className={cx('my-popover', `popover_mode_${this.props.fill_screen ? 'fill-screen' : 'keep-constrained'}`)} onClick={this.props.dismiss_popover}>
          <div className={cx('popover__container')} onClick={(event) => event.stopPropagation()}>
            <div className={cx('popover__header')}>
              <div className={cx('popover__header__title')}>
                {this.props.title}
              </div>
              <div className={cx('popover__header__close-button')} onClick={this.dismiss_popover}>
                <MdClose />
              </div>
            </div>
            <div className={cx('popover__content')}>
              <div style={{flex: 0}}></div>
              <this.props.component {...this.props.props} ref={(popover_content) => this.popover_content = popover_content} />
            </div>
          </div>
        </div>
      )
    } else {
      return null
    }
  }
}

PopoverStatic.defaultProps = {
  props: {},
  dismiss_popover() {},
}

const Popover = connect(
  (state) => ({
    component: state.display.popover_component,
    props: state.display.popover_props || {},
    fill_screen: state.display.popover_fill_screen,
    title: state.display.popover_title,
  }),
  (dispatch) => ({
    dismiss_popover: () => dispatch(dismiss_popover()),
  })
)(PopoverStatic)

Popover.defaultProps = {
  get_wrapped_content: (content) => content,
}

export default Popover