import { styled } from 'styleh-components'
import { StyledInput } from 'src/inputs/TextBox'
import { Button } from 'atoms/Button'
import { Heading, Text } from 'atoms/Text'
import { H3 } from 'atoms/Text/Heading'
import { PaymentsCardIcon } from 'atoms/Icons'
import { CardWrapper, ToggleButton } from 'organisms/ExpandableCard'
import { InformationCard } from 'organisms/InformationCard'

const StyledLabel = styled.withComponent(H3).attrs({
  'data-qa': 'qa-payment-information',
})`
  font-size: rem(20);
  margin: 0;

  @tablet-or-smaller() {
    font-size: rem(18);
  }
`

const StyledButton = styled.withComponent(H3).attrs({
  'data-qa': 'qa-new-payment-method',
})`
  cursor: pointer;
  color: #00a0db;
  text-transform: capitalize;
  font-size: rem(18);
  font-weight: 400;
  margin: 0;

  @tablet-or-smaller() {
    font-size: rem(16);
    justify-content: left;
    margin-top: rem(16);
  }
`
const ItemWrapper = styled.section.attrs({
  'data-qa': 'qa-payment-card-details',
})`
  display: flex;
  flex-direction: row;
  align-items: center;
  border: rem(1) solid #5F6C88;
  border-radius: rem(4);
  margin-bottom: rem(16);
  padding: rem(20);

  ${props => props.isDefaultPayment && styled.css`
    border-color: #159FD5;
    border-width: rem(3);
  `}

  @phone-or-smaller() {
    padding: rem(16);
  }

  &:last-child {
    margin-bottom: 0;
  }

  ${ToggleButton} {
    top: 0;
    right: 0;
    bottom: auto;
    padding: 0;
  }

  ${CardWrapper} {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    @tablet-or-smaller() {
      flex-direction: column;
      align-items: baseline;
    }
  }
  @tablet-or-smaller() {
    flex-direction: column;
    align-items: baseline;
  }
`
const IconWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`
const NameOnCard = styled.withComponent(Heading)`
  margin: 0;
  margin-bottom: rem(4);
  font-size: rem(18);
`
const CardNumber = styled.withComponent(Heading)`
  margin:0;
  font-size: rem(18);
  font-weight: 400;
`
const CardExpiry = styled.withComponent(Text)`
  font-size: rem(16);
  margin-top: rem(5);
`
const CardInformation = styled.div`
  margin-right: rem(8);

  @phone-or-smaller() {
    margin-bottom: rem(24);
  }
`
const CardCvv = styled.withComponent(StyledInput)`
  width: rem(100);
  margin-right: rem(53);
  @tablet-or-smaller() {
    width: rem(135);
    margin-top: 0;
  }
`
const CardCvvInformation = styled.div`
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  flex: 1;
`
const StyledPaymentsCardIcon = styled.withComponent(PaymentsCardIcon)`
  margin: 0;
  flex: 0 0 rem(50);
  margin-right: rem(8);
  height: rem(30);
  border: rem(1) solid #ccc;
  padding: rem(4);
`

const StyledInformationCard = styled.withComponent(InformationCard)`
  display: flex;
`

export {
  StyledLabel,
  StyledButton,
  ItemWrapper,
  IconWrapper,
  CardNumber,
  CardExpiry,
  NameOnCard,
  CardInformation,
  CardCvv,
  CardCvvInformation,
  StyledPaymentsCardIcon,
  StyledInformationCard,
}