import { styled } from 'styleh-components'
import { ButtonIcon } from 'atoms/Button'
import { ButtonWithIcon } from 'presets/Buttons'
import { borderLine } from 'src/styles'
import { StyledLabel, StyledInput } from 'src/inputs/TextBox'
import { StyledLabel as DropDownLabel } from 'src/forms/input/plugins/Special/SelectBoxInput'
import {
  StyledClickBoundary,
  StyledSelectText,
  StyledSelect,
} from 'molecules/SelectDropDown'
import { StyledFormWrapper } from '../styled'

const StyledRemoveButton = styled.withComponent(ButtonWithIcon)`
  padding: 0;
  color: #606d89;
  background-color: transparent;
  ${ButtonIcon} {
    svg {
      fill: #606d89;
    }
  }
  @tablet-or-larger() {
    width: rem(20);
    height: rem(20);
    align-self: center;
    label {
      display: none;
    }
  }
  @phone-or-smaller() {
    border: 1px solid #606d89;
    border-radius: rem(4);
    width: 100%;
    ${ButtonIcon} {
      display: none;
    }
  }
`

const RemoveUserForm = styled.withComponent(StyledFormWrapper).attrs({
  'data-qa': 'qa-remove-user-container',
})`
  @phone-or-smaller() {
    padding-bottom: rem(24);
    &:after {
      ${borderLine};
      bottom: auto;
      margin: rem(24) 0;
    }
  }
  ${StyledLabel}, ${DropDownLabel} {
    color: #818181;
  }
  ${StyledInput}:disabled {
    border-color: #cacfda;
    color: #818181;
    background-color: var(--color-pure-white);
    cursor: not-allowed;
  }
  ${StyledClickBoundary} {
    border-color: #cacfda;
    cursor: not-allowed;
    ${StyledSelect} {
      cursor: not-allowed;
      ${StyledSelectText} {
        color: #818181;
      }
    }
  }
`

export { StyledRemoveButton, RemoveUserForm }