import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { toCommonState, CommonState } from 'src/state'
import { TextEllipsisProps } from './typings'
import {
  content as defaultContent,
  showMoreLabel as defaultShowMoreLabel,
  showHideLabel as defaultShowHideLabel,
} from './fixture'
import {
  defaultRenderWrapper,
  defaultRenderTextExpandToggle,
} from './renderProps'

@observer
class TextEllipsis extends React.Component<TextEllipsisProps, CommonState> {
  static defaultProps = {
    className: '',
    width: 200,
    noOfLines: 2,
    noOfCharacters: 75,
    content: defaultContent,
    shouldTrimWhiteSpace: false,
    showMoreLabel: defaultShowMoreLabel,
    showHideLabel: defaultShowHideLabel,

    /**
     * renderProps
     */
    renderWrapper: defaultRenderWrapper,
  }

  observableState = toCommonState(this.props)

  render() {
    const { renderWrapper, ...remainingProps } = this.props
    const children = defaultRenderTextExpandToggle(remainingProps, this.observableState)
    const view = renderWrapper({ ...remainingProps, children })
    return view
  }
}

export { TextEllipsis }
export default TextEllipsis