import { styled } from 'styleh-components'
import { Heading } from '@skava/ui/dist/components/atoms/Text'
import { ButtonWithIcon } from 'presets/Buttons'
import { ButtonText, ButtonIcon } from '@skava/ui/dist/components/atoms/Button'
import { PaymentWithBillingAddress } from '@skava/ui/dist/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);
  }
  .form-wrapper {
    padding: 0 rem(16);
    @phone-or-smaller() {
      padding: 0 rem(8);
    }
  }
`

const StyledToggleButton = styled.withComponent(ButtonWithIcon).attrs({
  'data-qa': 'qa-add-payment-button',
})`
  @desktop-or-larger() {
    width: rem(162);
    height: rem(44);
    border-radius: rem(4);
    background-color: var(--color-blue);
    ${ButtonText} {
      color: var(--color-pure-white);
      font-weight: 500;
      font-size: rem(18);
      text-transform: capitalize;
    }
    ${props =>
      props.isExpanded === true &&
      styled.css`
        background-color: var(--color-pure-white);
        border: 1px solid var(--color-blue);
        ${ButtonText} {
          color: var(--color-dark-grey);
        }
      `}
    ${ButtonIcon} {
      display: none;
    }
  }
  @tablet-or-smaller() {
    background-color: transparent;
    width: rem(22);
    height: rem(22);
    padding: 0;
    ${ButtonIcon} {
      width: auto;
      height: auto;
      svg {
        /* transition: transform 300ms ease-in-out; */
        transform: rotate(-135deg);
        width: rem(22);
        height: rem(22);
        fill: var(--color-blue);
        ${props =>
          props.isExpanded === true &&
          styled.css`
            transform: rotate(0);
          `}
      }
    }
    ${ButtonText} {
      display: none
    }
  }
`

const StyledHeading = styled.withComponent(Heading)`
  font-size: rem(24);
  text-transform: capitalize;
  color: var(--color-black);
  font-weight: 500;
  margin: 0;
`

export { StyledPaymentWithBillingAddress, StyledToggleButton, StyledHeading }