import React from 'react'
import { InviteUserForm } from '../InviteUserForm'
import { InviteUserListProps } from './typings'
import { StyledHeading, FormListWrapper, StyledButton, Wrapper } from './styled'

function defaultRenderHeading(props: InviteUserListProps) {
  return <StyledHeading width={150} />
}

function defaultRenderItem(props: InviteUserListProps) {
  return <InviteUserForm />
}

function defaultRenderButton(props: InviteUserListProps) {
  return <StyledButton />
}

function defaultRenderBox(props: InviteUserListProps) {
  const { renderHeading, renderItem, renderButton, ...remainingProps } = props
  return (
    <React.Fragment>
      {renderHeading(remainingProps)}
      <FormListWrapper>{renderItem(remainingProps)}</FormListWrapper>
      {renderButton(remainingProps)}
    </React.Fragment>
  )
}

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

export {
  defaultRenderHeading,
  defaultRenderItem,
  defaultRenderButton,
  defaultRenderBox,
  defaultRenderWrapper,
}