import React from 'react'
import { InviteUserFormProps } from './typings'
import {
  StyledAddUserText,
  StyledIconButton,
  ButtonWrapper,
  StyledFormField,
  StyledHeading,
  EmailWrapper,
  SelectBoxWrapper,
  FormFieldsWrapper,
  Wrapper,
} from './styled'

function defaultRenderButton(props: InviteUserFormProps) {

  return (
    <React.Fragment>
      <StyledIconButton width="22" height="22" />
      <StyledAddUserText width="80" height="18" />
    </React.Fragment>
  )
}

function defaultRenderFormFields(props: InviteUserFormProps) {
  return (
    <React.Fragment>
      <EmailWrapper>
        <StyledHeading />
        <StyledFormField height="44" />
      </EmailWrapper>
      <SelectBoxWrapper>
        <StyledHeading />
        <StyledFormField height="44" />
      </SelectBoxWrapper>
      <SelectBoxWrapper>
        <StyledHeading />
        <StyledFormField height="44" />
      </SelectBoxWrapper>
    </React.Fragment>
  )
}

function defaultRenderBox(props: InviteUserFormProps) {
  const {
    renderFormFields,
    renderButton,
    ...remainingProps
  } = props

  return (
    <React.Fragment>
      <FormFieldsWrapper>
        {renderFormFields(remainingProps)}
      </FormFieldsWrapper>
      <ButtonWrapper>
        {renderButton(remainingProps)}
      </ButtonWrapper>
    </React.Fragment>
  )
}

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

export {
  defaultRenderButton,
  defaultRenderFormFields,
  defaultRenderBox,
  defaultRenderWrapper,
}