import { styled } from 'styleh-components'
import {
  TextPlaceholder,
  RectanglePlaceholder,
} from '@skava/ui/dist/components/atoms/Placeholder'

const InputSpacing = styled.css `
  padding: 0 rem(4);
  margin-bottom: rem(24);
`

const ContainerStyles = styled.css `
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  margin-left: -rem(4);
  margin-right: -rem(4);
`

const StyledLabel = styled(TextPlaceholder) `
  display: flex;
  width: 40%;
  height: rem(12);
  margin-bottom: rem(8);
`
const StyledInput = styled(RectanglePlaceholder) `
  display: flex;
  width: 100%;
  height: rem(40);
`

const StyledButton = styled(RectanglePlaceholder) `
  height: rem(44);
  border-radius: rem(4);
`

const StyledAddSaveButton = styled(StyledButton) `
  width: rem(264);
  @tablet-or-smaller() {
    width: rem(150);
  }
  @phone-or-smaller() {
    width: 50%;
    margin-right: rem(10);
  }
`

const StyledCancelButton = styled(StyledButton) `
  width: rem(162);
  @tablet-or-smaller() {
    width: rem(150);
  }
  @phone-or-smaller() {
    width: 50%;
  }
`

const ButtonContainer = styled.div `
  display: flex;
  justify-content: space-between;
`

/**
 * Billing Address Styles
 */
const StyledTitle = styled(TextPlaceholder) `
  display: flex;
  width: rem(300);
  height: rem(20);
  margin-bottom: rem(24);
  @phone-or-smaller() {
    width: rem(150);
  }
`

const StyledZipCode = styled.div `
  flex: 0 0 25%;
  ${InputSpacing};

  @tablet-or-smaller() {
    flex: 0 0 30%;
  }
`
const StyledState = styled.div `
  flex: 0 0 25%;
  ${InputSpacing};

  @tablet-or-smaller() {
    flex: 0 0 70%;
  }
`

/**
 * Toggle Button Styles
 */
const CheckboxLabel = styled(TextPlaceholder) `
  display: flex;
  width: rem(240);
  height: rem(14);
`
const Checkbox = styled(RectanglePlaceholder) `
  display: flex;
  width: rem(18);
  height: rem(18);
  margin-right: rem(16);
`

/**
 * PaymentMethod Styles
 */
const StyledSecurity = styled.div `
  flex: 0 0 10%;
  ${InputSpacing};

  @tablet-or-smaller() {
    flex: 0 0 20%;
  }

  @phone-or-smaller() {
    flex: 0 0 40%;
  }
`

const StyledYear = styled.div `
  flex: 0 0 10%;
  ${InputSpacing};

  @tablet-or-smaller() {
    flex: 0 0 16%;
  }

  @phone-or-smaller() {
    flex: 0 0 50%;
  }
`

const StyledMonth = styled.div `
  flex: 0 0 10%;
  ${InputSpacing};

  @tablet-or-smaller() {
    flex: 0 0 16%;
  }

  @phone-or-smaller() {
    flex: 0 0 50%;
  }
`

const StyledCardNumber = styled.div `
  flex: 0 0 30%;
  ${InputSpacing};

  @tablet-or-smaller() {
    flex: 0 0 68%;
  }
  @phone-or-smaller() {
    flex: 0 0 100%;
  }
`

const StyledFields = styled.div `
  flex: 0 0 50%;
  ${InputSpacing};

  @tablet-or-smaller() {
    flex: 0 0 100%;
  }
`

const Row = styled.div `
  flex: 0 0 100%;

  ${InputSpacing};
  display: flex;
  flex-direction: row;
  align-items: center;
`

const BillingFormContainer = styled.div `
  ${ContainerStyles};
  ${props =>
    props.isVisible === false &&
    styled.css `
      display: none;
    `};
`
const ToggleContainer = styled.div `
  ${ContainerStyles};
`
const PaymentMethodContainer = styled.div `
  ${ContainerStyles};
`

const StyledWrapper = styled.section ``

export {
  StyledLabel,
  StyledInput,
  Row,
  StyledAddSaveButton,
  StyledCancelButton,
  ButtonContainer,
  StyledTitle,
  StyledZipCode,
  StyledState,
  CheckboxLabel,
  Checkbox,
  StyledSecurity,
  StyledYear,
  StyledMonth,
  StyledCardNumber,
  StyledFields,
  PaymentMethodContainer,
  ToggleContainer,
  BillingFormContainer,
  StyledWrapper,
}