import { styled } from 'styleh-components'
import {
  ImagePlaceholder,
  RectanglePlaceholder,
  TextPlaceholder,
} from 'atoms/Placeholder'

const RemoveButtonPlaceholder = styled.withComponent(RectanglePlaceholder) `
  display: flex;
  order: 2;
  justify-content: flex-end;
`
const OptionLabel = styled.withComponent(TextPlaceholder) `
  width: rem(250);
  margin-left: rem(8);
`
const PaymentOption = styled.div `
  order: 1;
  flex: 1;
`
const Footer = styled.div `
  display: flex;
  margin-top: rem(16);
  justify-content: ${props =>
    props.isConfirming ? 'flex-end' : 'space-between'};
  align-items: center;
`
const ToggleButton = styled.withComponent(RectanglePlaceholder) `
  height: rem(44);
`
const ButtonContainer = styled.div`
  display: flex;
  flex: 1;
  justify-content: flex-end;
`
const GiftBalance = styled.withComponent(TextPlaceholder) `
  margin-left: rem(8);
`
const BalanceContainer = styled.div `
  display: flex;
  justify-content: flex-end;
  margin-right: rem(32);

  @tablet-or-smaller() {
    order: 2;
    flex-direction: column;
    margin-left: rem(16);
    margin-right: 0;
  }
`
const CardExpiry = styled.withComponent(TextPlaceholder) ``

const CardTitle = styled.withComponent(TextPlaceholder) `
  margin-bottom: rem(4);
`
const CardDetailContainer = styled.div `
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: rem(8);

  @tablet-or-smaller() {
    order: 3;
    flex: 0 0 100%;
    margin-left: 0px;
    margin-top: 15px;
  }
`
const Icon = styled.withComponent(ImagePlaceholder) ``

const IconContainer = styled.div `
  width: 76px;
  height: 48px;
  @tablet-or-smaller() {
    order: 1;
  }
`
const CardDetailsWrapper = styled.div `
  display: flex;
  flex: 0 0 70%;
  @tablet-or-smaller() {
    flex-wrap: wrap;
  }`

const Header = styled.div `
  display: flex;
  justify-content: space-between;
  ${props =>
    props.isConfirming &&
    styled.css `
      opacity: 0.5;
    `};
`
const PaymentCardWrapper = styled.div ``

export {
  RemoveButtonPlaceholder,
  OptionLabel,
  PaymentOption,
  Footer,
  ToggleButton,
  ButtonContainer,
  GiftBalance,
  BalanceContainer,
  CardExpiry,
  CardTitle,
  CardDetailContainer,
  Icon,
  IconContainer,
  CardDetailsWrapper,
  Header,
  PaymentCardWrapper,
}