import React from 'react'
import { wording } from '@skava/ui/dist/words'
import { StatusDetailsProps } from './typings'
import {
  StyledStatus,
  StyledSeparator,
  StyledTeamText,
  StyledRoleText,
  StyledEmail,
  StyledIdentifier,
  StyledName,
} from './styled'

enum inviteStatus {
  'invited' = '#5F6C88',
  'active' = '#2C2C2C',
}

function defaultRenderStatus(props: StatusDetailsProps) {
  const { item } = props
  const { status } = item
  return <StyledStatus color={inviteStatus[status]}>{item.status}</StyledStatus>
}

function defaultRenderTeamRole(props: StatusDetailsProps) {
  const { item } = props
  return (
    <React.Fragment>
      <StyledTeamText>{item.team}</StyledTeamText>
      <StyledSeparator> | </StyledSeparator>
      <StyledRoleText>{item.role}</StyledRoleText>
    </React.Fragment>
  )
}

function defaultRenderEmail(props: StatusDetailsProps) {
  const { item } = props
  return <StyledEmail>{item.email}</StyledEmail>
}

function defaultRenderIdentifier(props: StatusDetailsProps) {
  const { item } = props
  return (
    <React.Fragment>
      <StyledIdentifier>{`${wording.identifierLabel}:`}</StyledIdentifier>
      <StyledIdentifier>{item.identifier}</StyledIdentifier>
    </React.Fragment>
  )
}

function defaultRenderName(props: StatusDetailsProps) {
  const { item } = props
  return <StyledName>{item.name}</StyledName>
}

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