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

const TextPlaceholder = styled(Placeholder) ``

const StyledText = StyledBaseText.as('span')

const StyledDetails = styled(StyledText) ``
const StyledStatus = styled(StyledText) ``
const StyledSeparator = styled.span ``
const StyledEmail = styled(StyledText) ``
const StyledIdentifier = styled(StyledText) ``
const StyledName = styled(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,
}