import React from 'react'
import { NO_OP } from 'exotic'
import { SignUpFormProps } from './typings'
import {
  defaultRenderHeading,
  defaultRenderFormFields,
  defaultRenderButtons,
  defaultRenderWrapper,
} from './renderProps'

class SignUpForm extends React.PureComponent<SignUpFormProps> {
  static defaultProps = {
    className: '',

    // render props
    renderHeading: defaultRenderHeading,
    renderFormFields: defaultRenderFormFields,
    renderButtons: defaultRenderButtons,
    renderWrapper: defaultRenderWrapper,

    // handle click events
    onSignUpClick: NO_OP,
  }
  render() {
    const {
      renderWrapper,
      renderHeading,
      renderFormFields,
      renderButtons,
      ...remainingProps
    } = this.props
    const children = (
      <React.Fragment>
        {renderHeading(remainingProps)}
        {renderFormFields(remainingProps)}
        {renderButtons(remainingProps)}
      </React.Fragment>
    )
    return renderWrapper({ children, ...remainingProps })
  }
}

export { SignUpForm }
export default SignUpForm