import { styled } from 'styleh-components'
import { StyledBaseText } from 'atoms/Text'
import { TextPlaceholder as Placeholder } from 'atoms/Placeholder'

const TextPlaceholder = styled.withComponent(Placeholder)``

const StyledText = StyledBaseText.as('span')

const StyledDetails = styled.withComponent(StyledText)``
const StyledStatus = styled.withComponent(StyledText)``
const StyledSeparator = styled.span``
const StyledEmail = styled.withComponent(StyledText)``
const StyledIdentifier = styled.withComponent(StyledText)``
const StyledName = styled.withComponent(StyledText).attrs({
  'data-qa': 'qa-user-name'
})``

const StatusWrapper = styled.div.attrs({
  'data-qa': 'qa-user-status'
})`
  grid-area: status;
  display: flex;
  justify-content: flex-end;
`
const TeamRoleWrapper = styled.div`
  grid-area: teamrole;
`
const EmailWrapper = styled.div.attrs({
  'data-qa': 'qa-user-email'
})`
  grid-area: email;
  @phone-or-smaller() {
    display: none;
  }
`
const IdentifierWrapper = styled.div.attrs({
  'data-qa': 'qa-user-identifier'
})`
  grid-area: identifier;
`
const NameWrapper = styled.div`
  grid-area: name;
`
const Wrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 'name identifier email .' '. . teamrole status';

  @tablet-or-smaller() {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'name email .' 'identifier teamrole status';
  }

  @phone-or-smaller() {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'name identifier . .' 'teamrole email . status';
  }
  div {
    margin-bottom: 0.5rem;
  }
`

export {
  TextPlaceholder,
  StyledDetails,
  StyledStatus,
  StyledSeparator,
  StyledEmail,
  StyledIdentifier,
  StyledName,
  //
  StatusWrapper,
  TeamRoleWrapper,
  EmailWrapper,
  IdentifierWrapper,
  NameWrapper,
  Wrapper,
}