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

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

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

      .email-icon {
        top: rem(20);
      }

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

        ${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: 16px;
          text-transform: none;
          padding-left: rem(40);

          &:Focus {
            ~ .email-icon {
              svg {
                  fill: #1B75BC;
              }
            }
          }
        }

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

    /** Note:
      * Since SelectDropDown doesn't have error message support,
      * while including it in future, it should have className
      * input-error-message, or else error message styling issue
      * will occur
    */
    .input-error-message {
      position: absolute;
      width: 100%;
      bottom: -rem(18);
    }

    .button-group {
      display: flex;
      flex: 0 0 rem(20);
      align-self: flex-end;
      margin-left: rem(8);
      height: rem(44);
    }

    @tablet-or-smaller() {
      .invite-form-container {
        flex-wrap: wrap;
        .drop-down-container {
          flex: 1 1 50%;
          margin-top: rem(8);
        }
      }
      .input-error-message {
        position: relative;
        bottom: auto;
      }
    }

    @tablet-or-larger() {
      .drop-down-container {
        .input-error-message {
          position: absolute;
          width: 100%;
          bottom: -rem(12);
        }
      }
      .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(16) 0 0;
      }
    }
  }

`

export { StyledFormWrapper }