import { styled } from 'styleh-components'
import { StyledLabel } from 'src/inputs/TextBox'
import { LabelElement } from 'src/components/atoms/Text'
import { userSelect } from 'src/styles'
import { PrimaryButton } from 'presets/Buttons'

const StyledButton = styled.withComponent(PrimaryButton)`
  height: rem(44);
  border-radius: rem(4);
  color: var(--color-pure-white);
  font-weight: 500;
  font-size: rem(18);
  text-transform: capitalize;
`

const StyledCancel = styled.withComponent(StyledButton)`
  background-color: var(--color-light-grey);
  width: rem(162);
  @tablet-or-smaller() {
    width: rem(150);
  }
  @phone-or-smaller() {
    width: 50%;
  }
`

const StyledSubmitButton = styled.withComponent(StyledButton)`
  background-color: var(--color-blue);
  width: rem(264);
  ${props =>
    props.isValidForm === false &&
    styled.css`
      background-color: var(--color-pure-white);
      border: 1px solid var(--color-blue);
      color: var(--color-light-grey);
      cursor: not-allowed;
    `}
  @tablet-or-smaller() {
    width: rem(150);
  }
  @phone-or-smaller() {
    width: 50%;
    margin-right: rem(10);
  }
`

const Wrapper = styled.section`
  .form-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    margin-left: -rem(4);
    margin-right: -rem(4);

    .button-group {
      display: flex;
      flex: 1;
      justify-content: space-between;
      padding: 0 rem(4);
    }

    .billing-address-wrapper {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .form-item-wrapper {
        flex: 0 0 50%;
        padding: 0 rem(4);

        input::placeholder {
          font-style: italic;
        }

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

        &.billing-address-heading {
          margin-bottom: rem(16);
          flex: 0 0 100%;
          font-size: rem(24);
          font-weight: 500;
          text-transform: capitalize;
        }

        &.state {
          flex: 0 0 30%;

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

        &.zip-code {
          flex: 0 0 20%;

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

    .form-item-wrapper {
      flex: 0 0 50%;
      padding: 0 rem(4);

      input::placeholder {
        font-style: italic;
      }

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

      .input-show-password-icon {
        display: none;
      }

      &.card-number {
        flex: 0 0 30%;

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

      &.card-month {
        flex: 0 0 10%;

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

      &.card-expire-year {
        flex: 0 0 10%;

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

      &.default-address {
        flex: 0 0 100%;
        width: 100%;
        margin: rem(8) 0 rem(18);
        align-items: baseline;

        label {
          @font (16, medium);
          color: var(--color-black);
          user-select: none;
          align-self: flex-start;
        }
        svg {
          width: rem(18);
          height: auto;
          border-radius: rem(2);
          ${userSelect('none')};

          .checkbox-tickfill {
            transform: scale(1.4, 1.4) translate(rem(20), rem(30));
          }
        }
      }

      ${StyledLabel} {
        display: flex;
        position: relative;
        margin-bottom: rem(8);
        top: 0;
        text-transform: capitalize;
        @font (16, regular);
        overflow: visible;
      }
    }
  }
`

export { Wrapper, StyledCancel, StyledSubmitButton }