import React, {Component} from 'react'
import classNames from 'classnames/bind'
import Field from 'components/field'
import {show_popover, dismiss_popover} from '../actions/display'
import store from '../common/store'
import auto_bind from 'common/auto_bind'
import {color} from '../common/constants'

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

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

  show_popover() {
    const {popover_component, popover_fill_screen, name} = this.props
    store.dispatch(show_popover(
      popover_component,
      this.get_popover_props(),
      name,
      popover_fill_screen,
    ))
  }

  get_popover_props() {
    const {on_save, ...props} = this.props.popover_props
    return {
      ...props,
      on_save(...args) {
        store.dispatch(dismiss_popover())
        on_save(...args)
      },
    }
  }

  render() {
    const {editable, value, placeholder} = this.props
    return (
      <Field
        {...this.props}
        category="popover"
        className={cx({'field_editable': editable})}
        >
        <div
          key={'display'}
          className={cx('field__display', {'field__display_empty': value.length == 0})}
          onClick={editable ? this.show_popover : null}
          >
          <div className={cx('field__label', {'field__label_filled': value})}>
            {value.length == 0 ? (
              placeholder || <span>&hellip;</span>
            ) : value}
            {value.length > 85 ? (
              <div className={cx('field__comment-ellipsis')}>&hellip;</div>
            ) : null}
          </div>
        </div>
      </Field>
    )
  }
}

PopoverField.defaultProps = {
  name: "",
  show_label: true,
  display_only: false,
  ellipsis: false,
  editable: true,
  value: "",
  popover_component: null,
  popover_props: {},
  placeholder: "",
}

export default PopoverField