import { styled } from 'styleh-components'
import { Heading, Text, Label } from '@skava/ui/dist/components/atoms/Text'
import { ButtonText, ButtonIcon } from '@skava/ui/dist/components/atoms/Button'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { LinkButton, ButtonWithIcon } from 'presets/Buttons'
import { PaymentCard } from 'abstractions/PaymentMethod/Item/PaymentCard'

const RemoveButton = styled(ButtonWithIcon).attrs({
  'data-qa': 'qa-remove-button',
}) `
  display: flex;
  border: 1px solid var(--color-light-grey);
  background: var(--color-pure-white);
  color: var(--color-light-grey);
  order: 2;
  flex: 0 0 rem(162);
  height: rem(44);
  background-color: #efefef;
`

const OptionLabel = styled(Label) `
  margin-left: rem(8);
  font-size: rem(16);
  text-transform: capitalize;
`

const PaymentOption = styled.div `
  display: flex;
  flex: 0 0 auto;
  order: 1;
  align-items: center;
`

const ToggleButton = styled(LinkButton).attrs({
  'data-qa': 'qa-edit-payment',
}) `
  height: rem(24);
  width: auto;
  padding: 0;

  &:hover {
    text-decoration: none;
  }
  ${props =>
    props.isConfirming === true &&
    styled.css `
      pointer-events: none;
    `}

  ${ButtonText} {
    margin: 0;
    margin-right: rem(8);
    color: var(--color-black);
    text-transform: capitalize;
  }

  ${ButtonIcon} {
    margin: 0;
  }
`

const GiftBalanceAmount = styled(Text) `
  margin-left: rem(16);
  font-size: 18px;
  color: #009944;

  @tablet-or-smaller() {
    margin-left: 0;
  }
`

const GiftBalanceLabel = styled(Text) `
  font-size: 18px;
  text-transform: capitalize;
  &:after {
    content: ':';
  }
`

const CardExpiry = styled(Text).attrs({
  'data-qa': 'qa-expirydate',
}) ``

const CardTitle = styled(Heading).attrs({
  'data-qa': 'qa-type',
}) `
  margin: 0;
  font-size: rem(18);
`

const PaymentCardPlaceholder = PaymentCard

const StyledMaterialIcon = styled(MaterialIcon) `
  ${props =>
    props.isSelected &&
    styled.css `
      fill: #169fd6;
    `}
`

export {
  RemoveButton,
  OptionLabel,
  PaymentOption,
  ToggleButton,
  GiftBalanceLabel,
  GiftBalanceAmount,
  CardExpiry,
  CardTitle,
  PaymentCardPlaceholder,
  StyledMaterialIcon,
}