import React from 'react'
import { isFunction } from 'exotic'
import { wording } from 'src/words'
import Empty from 'atoms/Empty'
import { Form } from './Form'
import { SignInFormProps } from './typings'
import {
  SignInHeading,
  CreateAccountLabel,
  CreateAccountButton,
  SignInFormWrapper,
} from './styled'

// rendering heading
function defaultRenderHeading(props: SignInFormProps) {
  return <SignInHeading breedType="h2" content={wording.signInText} />
}

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

// rendering the form fields buttons
function defaultRenderButtons(props: SignInFormProps) {
  const { onCreateAccountClick, clientName } = props

  const handleCreateAccountClick = event => {
    if (isFunction(onCreateAccountClick)) {
      const changeArgs = { event }
      onCreateAccountClick(changeArgs)
    }
  }
  return (
    <React.Fragment>
      <CreateAccountLabel>{`${
        wording.newLabel
      } ${clientName}?`}</CreateAccountLabel>
      <CreateAccountButton
        {...props}
        text={wording.createAnAccountLabel}
        onClick={handleCreateAccountClick}
      />
    </React.Fragment>
  )
}

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

export {
  defaultRenderWrapper,
  defaultRenderHeading,
  defaultRenderFormFields,
  defaultRenderButtons,
}