import { styled } from 'styleh-components'
import {
  StyledSelect,
  StyledClickBoundary,
  SelectText,
} from 'molecules/SelectDropDown'
import { LabelElement } from 'atoms/Text'
import { PrimaryButton, SecondaryButton } from 'presets/Buttons'

const StyledSaveButton = styled.withComponent(PrimaryButton)`
  background-color: #1b75bc;
`

const StyledCancelButton = styled.withComponent(SecondaryButton)`
  border-color: #5f6c88;
  color: #5f6c88;
`
const EditUserFormWrapper = styled.section`
  padding-top: rem(12);
  desktop-or-larger() {
    padding-top: rem(8);
  }
  .input-group-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: rem(16);

    @tablet-or-smaller() {
      grid-template-columns: repeat(2, 1fr);
    }

    .input-box {
      height: rem(44);
      background-color: $colors-white;
    }

    .status-form-item-wrapper {
      @phone-or-smaller() {
        grid-column-end: span 2;
      }
    }

    ${StyledClickBoundary} {
      height: rem(44);
      ${SelectText} {
        font-size: rem(16);
      }
    }

    ${StyledSelect} {
      height: 100%;
      padding: 0 rem(4) 0 rem(12);
    }

    ${LabelElement} {
      display: flex;
      text-transform: capitalize;
      color: #2c2c2c;
      font-size: rem(16);
      margin-bottom: rem(8);
      height: rem(16);
      font-weight: 400;
    }
  }

    @tablet-or-smaller() {
      grid-template-columns: repeat(2, 1fr);
    }
    @phone-or-smaller() {
      grid-template-columns: repeat(1, 1fr);
    }
    .email-address-wrapper {
      @tablet-or-smaller() {
        grid-column-end: span 2;
      }
    }
    .name-wrapper,
    .id-wrapper {
      @tablet-or-smaller() {
        grid-column-end: span 1;
      }
    }
  }

  .button-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: rem(16);
    margin-top: 1rem;

    @tablet-or-smaller() {
      grid-template-columns: repeat(2, 1fr);
      margin-top: 0;
    }

    @phone-or-smaller() {
      margin-top: 0;
      grid-template-columns: repeat(1, 1fr);
    }

    .button {
      color: #fff;
      font-size: 18px;
      font-weight: 500;
    }
    .cancel-button {
      width: 100%;
      background: transparent;
      color: #5F6C88;
      border: 1px solid #5F6C88;

    }
    .submit-button {
      margin-bottom: 1rem;
    }
  }

  .disableClass {
    .input-box-label {
      color: #818181;
      text-transform: capitalize;
      display: flex;
      margin-bottom: rem(8);
      font-size: rem(16);
      font-weight: 400;
    }
    .input-box {
      border-color: #cacfda;
      font-size: rem(16);
      font-weight: 400;
      color: #818181;
      padding-left: rem(16);
    }
  }
`

export { StyledSaveButton, StyledCancelButton, EditUserFormWrapper }