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

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

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

const StyledButton = styled(H3).attrs({
  'data-qa': 'qa-new-payment-method',
}) `
  cursor: pointer;
  color: var(--color-blue);
  text-transform: capitalize;
  font-size: rem(18);
  font-weight: 500;
  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 var(--color-dark-grey);
  border-radius: rem(4);
  margin-bottom: rem(16);
  padding: rem(20);

  ${props =>
    props.isDefaultPayment &&
    styled.css `
      border-color: var(--color-blue);
      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(Heading) `
  margin: 0;
  margin-bottom: rem(4);
  font-size: rem(18);
`
const CardNumber = styled(Heading) `
  margin: 0;
  font-size: rem(18);
  font-weight: 500;
`
const CardExpiry = styled(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(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(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(InformationCard) `
  display: flex;
`

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