import { styled } from 'styleh-components'
import {
  Button,
  ButtonText,
  ButtonIcon,
} from '@skava/ui/dist/components/atoms/Button'
import { StyledBaseText } from '@skava/ui/dist/components/atoms/Text'
import { wording } from '@skava/ui/dist/words'

const DefaultButton = styled(Button) `
  width: rem(260);
  height: rem(44);
  border-radius: rem(4);
  margin-bottom: rem(16);

  @tablet-or-smaller() {
    width: rem(160);
  }

  @phone-or-smaller() {
    width: 100%;
  }

  ${ButtonText} {
    font-size: rem(18);
    text-transform: capitalize;
    margin: 0;
  }
`

const StyledPrimaryButton = styled(DefaultButton).attrs({
  'data-qa': 'qa-buy-now',
}) `
  background-color: var(--color-blue);
  color: var(--color-pure-white);
  border: none;
`

const StyledSecondaryButton = styled(DefaultButton) `
  background-color: var(--color-pure-white);
  color: var(--color-dark-grey);
  border: rem(1) solid var(--color-dark-grey);
  font-weight: 500;
`

const StyledSkipButton = styled(StyledSecondaryButton).attrs({
  'data-qa': 'qa-skip-one-time',
}) ``

const StyledPauseButton = styled(StyledSecondaryButton).attrs({
  'data-qa': 'qa-pause-subscription',
}) `
  ${ButtonText} {
    &:before {
      @desktop-or-larger() {
        content: '${wording.pauseSubscription}';
      }

      @tablet-or-smaller() {
        content: '${wording.pauseButtonLabel}';
      }
    }
  }
`

const StyledCancelButton = styled(DefaultButton).attrs({
  'data-qa': 'qa-cancel-subscription',
}) `
  background-color: var(--color-dark-grey);
  color: var(--color-pure-white);
  border: none;
  ${ButtonText} {
    &:before {
      @desktop-or-larger() {
        content: '${wording.cancelSubscription}';
      }
      @tablet-or-smaller() {
        content: '${wording.cancel}';
      }
    }
  }
`
const StyledText = StyledBaseText.as('span')
const StyledStatus = styled(StyledText) `
  ${props =>
    props.color &&
    styled.css `
      color: ${props.color};
    `}
  font-weight: 500;
  text-transform: capitalize;
`

const StyledToggleButton = styled(Button) `
  background: transparent;
  border: 0;
  padding: 0;
  justify-content: flex-end;
  margin-bottom: rem(32);

  @phone-or-smaller() {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    order: 1;
  }

  ${ButtonText} {
    font-size: rem(18);
    text-transform: capitalize;
    margin: 0;
    font-weight: 500;

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

  ${ButtonIcon} {
    margin: 0;
    @desktop-or-larger() {
      padding-left: rem(8);
    }
  }
`

export {
  StyledPrimaryButton,
  StyledSkipButton,
  StyledPauseButton,
  StyledCancelButton,
  StyledStatus,
  StyledToggleButton,
}