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

class SignInForm extends React.PureComponent<SignInFormProps> {
  static defaultProps = {
    className: '',
    clientName: 'T-giant Pro',

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

    // handle click events
    onSignInClick: NO_OP,
    onCreateAccountClick: 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 { SignInForm }
export default SignInForm