import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { UserInviteProps } from './typings'
import {
  defaultRenderButton,
  defaultRenderInviteCard,
  defaultRenderRemoveUserForm,
  defaultRenderAddUserForm,
  defaultRenderHeading,
  defaultRenderWrapper,
} from './renderProps'
import { ButtonWrapper, HeadingWrapper } from './styled'

@observer
class UserInvite extends React.Component<UserInviteProps> {
  static defaultProps = {
    className: '',
    // renderProps
    renderButton: defaultRenderButton,
    renderInviteCard: defaultRenderInviteCard,
    renderRemoveUserForm: defaultRenderRemoveUserForm,
    renderAddUserForm: defaultRenderAddUserForm,
    renderHeading: defaultRenderHeading,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    console.log('Abstraction/UserInvite', this.props)
    const {
      renderHeading,
      renderInviteCard,
      renderButton,
      renderWrapper,
      state,
      ...remainingProps
    } = this.props

    const children = (
      <React.Fragment>
        <HeadingWrapper>{renderHeading(remainingProps, state)}</HeadingWrapper>
        {renderInviteCard(remainingProps, state)}
        <ButtonWrapper>{renderButton(remainingProps, state)}</ButtonWrapper>
      </React.Fragment>
    )
    return renderWrapper({ children, ...remainingProps }, state)
  }
}

export { UserInvite }
export default UserInvite