import React from 'react'
import { StatusDetailsProps } from './typings'
import {
  TextPlaceholder,
  StyledStatus,
  StyledSeparator,
  StyledDetails,
  StyledEmail,
  StyledIdentifier,
  StyledName,
  //
  StatusWrapper,
  TeamRoleWrapper,
  EmailWrapper,
  IdentifierWrapper,
  NameWrapper,
  Wrapper
} from './styled'

function defaultRenderStatus(props: StatusDetailsProps) {
  return <StyledStatus><TextPlaceholder height={12} width={90} /></StyledStatus>
}

function defaultRenderTeamRole(props: StatusDetailsProps) {
  return (
    <React.Fragment>
      <StyledDetails><TextPlaceholder height={12} width={90} /></StyledDetails>
      <StyledSeparator> | </StyledSeparator>
      <StyledDetails><TextPlaceholder height={12} width={70} /></StyledDetails>
    </React.Fragment>
  )
}

function defaultRenderEmail(props: StatusDetailsProps) {
  return <StyledEmail><TextPlaceholder height={12} width={'90%'} /></StyledEmail>
}

function defaultRenderIdentifier(props: StatusDetailsProps) {
  return (
    <React.Fragment>
      <StyledIdentifier><TextPlaceholder height={12} width={70} /></StyledIdentifier>
    </React.Fragment>
  )
}

function defaultRenderName(props: StatusDetailsProps) {
  return <StyledName><TextPlaceholder height={12} width={80} /></StyledName>
}

function defaultRenderBox(props: StatusDetailsProps) {
  const { renderName, renderIdentifier, renderEmail, renderTeamRole, renderStatus, ...remainingProps } = props
  return (
    <React.Fragment>
      <NameWrapper>{renderName(remainingProps)}</NameWrapper>
      <IdentifierWrapper>{renderIdentifier(remainingProps)}</IdentifierWrapper>
      <EmailWrapper>{renderEmail(remainingProps)}</EmailWrapper>
      <TeamRoleWrapper>{renderTeamRole(remainingProps)}</TeamRoleWrapper>
      <StatusWrapper>{renderStatus(remainingProps)}</StatusWrapper>
    </React.Fragment>
  )
}

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

export {
  defaultRenderName,
  defaultRenderIdentifier,
  defaultRenderTeamRole,
  defaultRenderEmail,
  defaultRenderStatus,
  defaultRenderBox,
  defaultRenderWrapper
}