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

const inputWrapperStyles = styled.css `
  flex: 0 0 43%;
  padding: 0 rem(4);
  margin-bottom: rem(16);

  @tablet-or-smaller() {
    flex: 0 0 50%;
  }

  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`

const Button = styled(RectanglePlaceholder) `
  width: rem(240);
  @phone-or-smaller() {
    flex: 0 0 100%;
    width: 100%;
  }
`
const RequiredLabel = styled(TextPlaceholder) `
  @phone-or-smaller() {
    margin-bottom: rem(16);
  }
`

const ButtonWrapper = styled.div `
  flex: 0 0 50%;
  padding: 0 rem(4);
  display: flex;
  justify-content: flex-end;

  @tablet-or-smaller() {
    flex: 0 0 100%;
  }
`
const RequiredWrapper = styled.div `
  flex: 0 0 50%;
  padding: 0 rem(4);
  display: flex;
  justify-content: flex-start;

  @tablet-or-smaller() {
    flex: 0 0 100%;
    order: -1;
    margin-bottom: rem(16);
  }
`

const Label = styled(RectanglePlaceholder) `
  height: rem(14);
  display: flex;
  margin-bottom: rem(8);
  width: auto;
`

const InputBox = styled(RectanglePlaceholder) `
  width: 100%;
  height: rem(40);
`

const Email = styled.div `
  ${inputWrapperStyles};
  margin-right: 60%;

  @phone-or-smaller() {
    margin-right: auto;
    flex: 0 0 100%;
  }
`

const Telephone = styled.div `
  ${inputWrapperStyles};
  margin-right: 60%;

  @phone-or-smaller() {
    margin-right: auto;
    flex: 0 0 100%;
  }
`

const Country = styled.div `
  ${inputWrapperStyles};
  margin-right: 60%;

  @tablet-or-smaller() {
    margin-right: auto;
  }

  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`

const PostalCode = styled.div `
  ${inputWrapperStyles};
  flex: 0 0 20%;

  @tablet-or-smaller() {
    flex: 0 0 10%;
  }

  @phone-or-smaller() {
    flex: 0 0 25%;
  }
`
const State = styled.div `
  ${inputWrapperStyles};
  flex: 0 0 25%;

  @tablet-or-smaller() {
    flex: 0 0 40%;
  }

  @phone-or-smaller() {
    flex: 0 0 75%;
  }
`
const City = styled.div `
  ${inputWrapperStyles};
`

const AddressLine = styled.div `
  ${inputWrapperStyles};
  margin-right: 60%;

  @tablet-or-smaller() {
    margin-right: auto;
  }

  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`

const LastName = styled.div `
  ${inputWrapperStyles};
  flex: 0 0 45%;

  @tablet-or-smaller() {
    flex: 0 0 40%;
  }

  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`
const MiddleName = styled.div `
  ${inputWrapperStyles};
  flex: 0 0 12%;

  @tablet-or-smaller() {
    flex: 0 0 10%;
  }

  @phone-or-smaller() {
    flex: 0 0 25%;
  }
`
const FirstName = styled.div `
  ${inputWrapperStyles};

  @phone-or-smaller() {
    flex: 0 0 75%;
  }
`

const FormWrapper = styled.div `
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -rem(4);
  margin-right: -rem(4);
`

const LinkButton = styled(TextPlaceholder) `
  max-width: 200px;
  margin-bottom: rem(24);
`

const Wrapper = styled.section ``

export {
  Label,
  InputBox,
  FirstName,
  MiddleName,
  LastName,
  AddressLine,
  City,
  State,
  PostalCode,
  Country,
  Telephone,
  Email,
  RequiredWrapper,
  ButtonWrapper,
  RequiredLabel,
  Button,
  FormWrapper,
  LinkButton,
  Wrapper,
}