// libs
import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction } from 'exotic'
import { LabelProps } from './typings'
import {
  defaultRenderLabel,
  defaultRenderLinkButton,
  defaultRenderWrapper,
} from './renderProps'

@observer
class LabelWithAction extends React.Component<LabelProps> {
  static defaultProps = {
    className: '',
    buttonLabel: '',
    renderWrapper: defaultRenderWrapper,
    renderLinkButton: defaultRenderLinkButton,
    renderLabel: defaultRenderLabel,
  }

  render() {
    const {
      renderWrapper,
      renderLinkButton,
      renderLabel,
      ...remainingProps
    } = this.props
    const { onClick } = remainingProps
    const children = isFunction(onClick)
      ? renderLinkButton(remainingProps)
      : renderLabel(remainingProps)
    const view = renderWrapper({ ...remainingProps, children })
    return view
  }
}

export { LabelWithAction }
export default LabelWithAction