import React from 'react'
import { ApprovalStatusProps } from './typings'
import { OrderInformation, UserInformation, StyledToggleButton } from './styled'
import {
  defaultRenderButton,
  defaultRenderOrderInformation,
  defaultRenderUserInformation,
  defaultRenderWrapper,
} from './renderProps'

class ApprovalStatus extends React.PureComponent<ApprovalStatusProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderOrderInformation: defaultRenderOrderInformation,
    renderUserInformation: defaultRenderUserInformation,
    renderButton: defaultRenderButton,
    renderWrapper: defaultRenderWrapper,
  }

  render() {
    const {
      renderButton,
      renderOrderInformation,
      renderUserInformation,
      renderWrapper,
      ...remainingProps
    } = this.props

    const children = (
      <React.Fragment>
        <UserInformation>
          {renderUserInformation(remainingProps)}
        </UserInformation>
        <OrderInformation>
          {renderOrderInformation(remainingProps)}
        </OrderInformation>
        <StyledToggleButton>{renderButton(remainingProps)}</StyledToggleButton>
      </React.Fragment>
    )
    return renderWrapper({ children, ...remainingProps })
  }
}

export { ApprovalStatus }
export default ApprovalStatus