import { styled } from 'styleh-components'
import { Label } from 'atoms/Text'
import { StyledLabel, StyledInput } from 'src/inputs/TextBox'
import { ErrorComponentWrapper } from 'atoms/Error'
import { StyledHeading } from '../styled'

const UserIdentifierWrapper = styled.div.attrs({
  'data-qa': 'qa-account-user-identifier',
}) `
  display: flex;
  flex: 1;
  justify-content: flex-end;

  @phone-or-smaller() {
    padding-top: rem(4);
  }
`

const StyledLabelText = styled.withComponent(Label) `
  font-size: rem(16);
  text-transform: uppercase;
`

const UserIdentifierText = styled.withComponent(StyledLabelText) `
  margin-right: rem(8);
  color: #2C2C2C;
  @tablet-or-larger() {
    font-size: rem(18);
  }
`

const UserIdentifierValue = styled.withComponent(StyledLabelText) `
  color: #2C2C2C;
  @tablet-or-larger() {
    font-size: rem(18);
  }
`

const Heading = styled.withComponent(StyledHeading).attrs({
  'data-qa': 'qa-my-profile-heading',
}) ``

const HeaderWrapper = styled.div.attrs({
  'data-qa': 'qa-my-profile-wrapper',
}) `
  display: flex;
  align-items: center;
  margin-bottom: rem(16);

  @phone-or-smaller() {
    flex-direction: column;
    align-items: baseline;
  }
`

const MyProfileForm = styled.section.attrs({
  'data-qa': 'qa-my-profile-container',
}) `
  .form-wrapper {
    .form-input-wrapper {
      margin: 0;
      .input-form:disabled {
        background-color: rgb(235, 235, 228);
      }
      &.email-address-wrapper {
        margin: rem(26) 0 rem(8) 0;
      }
      ${StyledLabel} {
        font-size: rem(16);
        text-transform: capitalize;
        font-weight: 400;
        color: #2c2c2c;
      }
      ${StyledInput} {
        font-size: rem(16);
        margin: rem(4) 0 rem(16);
        width: rem(430);
        color: #2c2c2c;

        @tablet-or-smaller() {
          width: 100%;
        }
      }
      ${ErrorComponentWrapper} {
        color: red;
        font-size: rem(14);
        font-weight: 400;
        position: absolute;
        top: 38px;
      }
    }
  }
`

export {
  Heading,
  HeaderWrapper,
  UserIdentifierWrapper,
  UserIdentifierText,
  UserIdentifierValue,
  MyProfileForm,
}