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

class ResetPasswordForm extends React.PureComponent<ResetPasswordFormProps> {
  static defaultProps = {
    className: '',

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

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

export { ResetPasswordForm }
export default ResetPasswordForm