import React from 'react'
import Empty from 'atoms/Empty'
import { wording } from 'src/words'
import { Form } from './Form'
import { ResetPasswordConfirmationFormProps } from './typings'
import {
  Heading,
  Wrapper,
 } from './styled'

// rendering heading
function defaultRenderHeading(props: ResetPasswordConfirmationFormProps) {
  return <Heading>{wording.resetPasswordTitle}</Heading>
}

// rendering the form fields
function defaultRenderFormFields(props: ResetPasswordConfirmationFormProps) {
  return <Form {...props}/>
}

// rendering the form fields buttons
function defaultRenderButtons(props: ResetPasswordConfirmationFormProps) {
  return <Empty />
}

// rendering the main wrapper
function defaultRenderWrapper(props: ResetPasswordConfirmationFormProps) {
  const { className, children } = props
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderWrapper,
  defaultRenderHeading,
  defaultRenderFormFields,
  defaultRenderButtons,
}