import React from 'react'
import { toCommonState, CommonState } from 'src/state'
import { TextEllipsisProps } from './typings'
import { getEllipsisString } from './deps'
import { TextEllipsisWrapper, ExpandableContent, MoreLabelElement } from './styled'
import { Empty } from 'atoms/Empty'

function defaultRenderTextExpandToggle(props: TextEllipsisProps, state: CommonState) {
  const { content, noOfCharacters, showMoreLabel, showHideLabel } = props
  const { isVisible, toggleVisibility } = state
  const ellipsisText = getEllipsisString(content, noOfCharacters, isVisible)
  const buttonLabel = (noOfCharacters < content.length) ? (isVisible ? showHideLabel : showMoreLabel) : <Empty />
  return (
    <ExpandableContent>
      {ellipsisText}
      <MoreLabelElement onClick={toggleVisibility}>
        {buttonLabel}
      </MoreLabelElement>
    </ExpandableContent>
  )
}

function defaultRenderWrapper(props: TextEllipsisProps) {
  const { className, children } = props
  return <TextEllipsisWrapper className={className}>{children}</TextEllipsisWrapper>
}

export { defaultRenderTextExpandToggle, defaultRenderWrapper }