import { styled } from 'styleh-components'
import {
  TextPlaceholder,
  CirclePlaceholder,
  RectanglePlaceholder,
} from '@skava/ui/dist/components/atoms/Placeholder'

const StyledIconButton = styled.withComponent(CirclePlaceholder) ``

const StyledAddUserText = styled.withComponent(TextPlaceholder) `
  display: none;
  padding-left: rem(8);

  @phone-or-smaller() {
    display: block;
  }
`

const ButtonWrapper = styled.div `
  display: flex;
  align-items: center;
  margin-left: rem(8);
  height: rem(44);
  @tablet-or-larger() {
    flex: 0 0 rem(22);
  }

  @phone-or-smaller() {
    padding: rem(12) 0 0;
    align-self: center;
    width: 100%;
    justify-content: center;
    height: auto;
  }
`

const StyledFormField = styled.withComponent(RectanglePlaceholder) `
  width: 100%;
`

const StyledHeading = styled.withComponent(TextPlaceholder) `
  width: rem(100);
  height: rem(16);
  margin-bottom: rem(8);
`

const FormWrapper = styled.div `
  display: flex;
  flex-direction: column;
  padding: 0 rem(4);
  width: 100%;
  @tablet-or-smaller() {
    &:first-child {
      margin-bottom: rem(8);
    }
  }
  @phone-or-smaller() {
    margin-bottom: rem(8);
  }
`

const EmailWrapper = styled.withComponent(FormWrapper) `
  @tablet-or-smaller() {
    flex: 0 0 100%;
  }
`

const SelectBoxWrapper = styled.withComponent(FormWrapper) `
  @tablet-or-smaller() {
    flex: 0 0 50%;
  }
  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`

const FormFieldsWrapper = styled.div `
  display: flex;
  flex: 1;
  margin: 0 rem(-4);

  @tablet-or-smaller() {
    flex-wrap: wrap;
  }
`

const Wrapper = styled.section `
  display: flex;
  align-items: flex-end;

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

export {
  StyledAddUserText,
  StyledIconButton,
  ButtonWrapper,
  StyledFormField,
  StyledHeading,
  EmailWrapper,
  SelectBoxWrapper,
  FormFieldsWrapper,
  Wrapper,
}