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 `
  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(20);
      }

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

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

        @phone-or-smaller() {
          margin-bottom: rem(14);
        }

        ${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: var(--color-blue);
              }
            }
          }
        }

        ${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
    */

    .button-group {
      display: flex;
      flex: 0 0 rem(20);
      margin-left: rem(8);
      height: rem(95);
      @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 }