import { styled } from 'styleh-components'
import { ErrorComponent } from 'atoms/Error'
import { PrimaryButton } from 'presets/Buttons'
import { StyledLabel } from 'src/inputs/TextBox'

const StyledPaymentForm = styled.section `
  width: 100%;

  .form-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .button-group {
      flex: 0 0 100%;
    }
  }

  ${StyledLabel} {
    position: relative;
    top: 0;
    text-transform: capitalize;
    color: #2c2c2c;
    font-size: rem(16);
    overflow: visible;
  }

  .cvv-number {
    ${StyledLabel} {
      text-transform: uppercase;
    }
  }

  ${ErrorComponent} {
    margin-top: rem(4);
    color: red;
    font-size: rem(14);
  }

  .placeholder-label {
    position: absolute;
    color: red;
  }

  .input-box-wrapper {
    flex: 0 0 100%;
    margin-bottom: rem(8);
    user-select: none;

    &.left-align {
      flex: 0 0 calc(50% - rem(8));
    }

    &.right-align {
      flex: 0 0 calc(50% - rem(8));
    }
    &.card-number {
      flex: 0 0 calc(70% - rem(8));
    }
    &.cvv-number {
      flex: 0 0 calc(30% - rem(8));
    }
    &.expiry-month {
      flex: 0 0 calc(60% - rem(8));
    }
    &.expiry-year {
      flex: 0 0 calc(40% - rem(8));
    }
  }
  .default-address {
    margin: rem(8) 0 rem(18);
    align-items: baseline;

    label {
      font-size: rem(16);
      color: #2c2c2c;
      user-select: none;
      align-self: flex-start;
    }
    svg {
      width: rem(18);
      height: auto;
      border-radius: rem(2);
    }
  }

  input.input-box {
    width: 100%;
    height: rem(44);
    padding: 0 rem(8);
    font-size: rem(16);
    margin-top: rem(8);
    color: #2c2c2c;
  }

  .billing-address-wrapper {
    flex: 0 0 100%;
    padding: rem(10) 0;
  }
`

const StyledPrimaryButton = styled.withComponent(PrimaryButton) `
  color: #fff;
  font-size: rem(16);
  text-transform: capitalize;
  margin-top: 1rem;
  user-select: none;
`

export { StyledPaymentForm, StyledPrimaryButton }