import { styled } from 'styleh-components'
import { StyledLabel, StyledInput } from '@skava/ui/dist/inputs/TextBox'
import { StyledLabel as DropDownLabel } from '@skava/ui/dist/forms/input/plugins/Special/SelectBoxInput'
import { StyledClickBoundary, StyledSelect } from '@skava/ui/dist/components/molecules/SelectDropDown'

const StyledFormWrapper = styled.section`
  position: relative;
  @phone-or-smaller() {
    padding-top: rem(24);
  }
  .form-wrapper {
    display: flex;

    .invite-form-container {
      display: flex;
      flex: 1;
      margin: 0 rem(-4);

      .email-icon {
        top: rem(18);
        opacity: 0.3;
      }

      .form-item-wrapper {
        flex: 1 1 100%;
        padding: 0 rem(4);
        margin-bottom: rem(32);

        @tablet-or-smaller() {
          margin-bottom: rem(24);
        }

        ${StyledLabel}, ${DropDownLabel} {
          margin-bottom: rem(8);
          text-transform: capitalize;
          font-size: 16px;
          font-weight: 400;
        }

        ${StyledClickBoundary}, ${StyledInput} {
          height: rem(44);
          margin-top: rem(8);
          text-transform: capitalize;
        }

        ${StyledInput} {
          font-size: $spacing;
          text-transform: none;
          padding-left: rem(40);
          border-radius: $spacing-extra-small;
          &.input-error {
            border-color: var(--color-red);
          }

          &:focus {
            ~ .email-icon {
              opacity: 1;
              svg {
                fill: var(--color-blue);
              }
            }
          }
        }

        ${StyledSelect} {
          padding-right: rem(8);
        }

        &.input-box-wrapper .input-error-message {
          position: absolute;
          left: 0;
          bottom: -rem(20);
        }
      }
    }

    .button-group {
      display: flex;
      flex: 0 0 rem(20);
      margin-left: rem(8);
      height: rem(100);
      @tablet-or-smaller() {
        height: rem(78);
        align-self: flex-end;
      }
    }

    @tablet-or-smaller() {
      .invite-form-container {
        flex-wrap: wrap;
        .drop-down-container {
          flex: 1 1 50%;
        }
      }
    }

    @tablet-or-larger() {
      .button-group {
        align-items: center;
      }
    }

    @phone-or-smaller() {
      flex-direction: column;
      .invite-form-container {
        flex-direction: column;
        .form-item-wrapper {
          flex: auto;
        }
      }
      .button-group {
        width: 100%;
        height: auto;
        flex: auto;
        align-self: auto;
        justify-content: center;
        margin: rem(4) 0 0;
      }
    }
  }
`

export { StyledFormWrapper }