import { styled } from 'styleh-components'
import {
  RectanglePlaceholder,
  CirclePlaceholder,
  TextPlaceholder,
} from 'atoms/Placeholder'
import {
  PaymentWithBillingAddress,
  ButtonContainer,
  PaymentMethodContainer,
  ToggleContainer,
  BillingFormContainer,
} from 'abstractions/forms/views/PaymentWithBillingAddress'

const StyledPaymentWithBillingAddress = styled.withComponent(
  PaymentWithBillingAddress
) `
  margin: 0 rem(-16);
  padding: rem(14) 0 rem(24);
  border-top: 1px solid #dde0e7;
  @tablet-or-smaller() {
    padding-bottom: rem(32);
  }
  @phone-or-smaller() {
    margin: 0 rem(-8);
  }
  ${ButtonContainer},
  ${PaymentMethodContainer},
  ${ToggleContainer},
  ${BillingFormContainer} {
    padding: 0 rem(16);
    @phone-or-smaller() {
      padding: 0 rem(8);
    }
  }
`

const StyledToggleButton = styled.withComponent(RectanglePlaceholder) `
  width: rem(162);
  height: rem(44);
  border-radius: rem(4);
  @tablet-or-smaller() {
    display: none;
  }
`

const StyledToggleIcon = styled.withComponent(CirclePlaceholder) `
  @desktop-or-larger() {
    display: none;
  }
  width: rem(22);
  height: rem(22);
`

const StyledHeading = styled.withComponent(TextPlaceholder) `
  width: rem(200);
  height: rem(22);
  @tablet-or-smaller() {
    width: rem(150);
    height: rem(18);
  }
`

const StyledHeadingWrapper = styled.div `
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: rem(24);
  @tablet-or-smaller() {
    align-items: center;
    margin-bottom: rem(20);
  }
`

const Wrapper = styled.div `
  background-color: var(--color-pure-white);
  padding: rem(20) rem(18) 0;
  ${props =>
    props.isExpanded === true &&
    styled.css `
      box-shadow: rem(0) rem(4) rem(12) rem(0) rgba(0, 0, 0, 0.3);
    `};
  @phone-or-smaller() {
    padding: rem(20) rem(8) 0;
  }
`

export {
  StyledPaymentWithBillingAddress,
  StyledToggleButton,
  StyledToggleIcon,
  StyledHeading,
  StyledHeadingWrapper,
  Wrapper,
}