import { styled } from 'styleh-components'
import { Button, ButtonLabel, ButtonIcon } from 'atoms/Button'
import { StyledFormWrapper } from '../styled'

const StyledButton = styled.withComponent(Button) `
  padding: 0;
  background: transparent;
  border: none;
  @tablet-or-larger() {
    width: rem(20);
    height: rem(20);
  }

  ${ButtonIcon} {
    display: flex;
    margin: 0;
    svg {
      width: rem(20);
      height: rem(20);
      fill: var(--color-blue);
      overflow: visible;
      circle {
        stroke: var(--color-blue);
        stroke-width: 2px;
      }
      rect {
        height: 2px;
        &:last-child {
          transform: translate(10px, 10px) rotate(90deg) translate(-9.5px, -9.5px);
        }
      }
    }
  }
  ${ButtonLabel} {
    text-transform: capitalize;
    font-size: 16px;
    color: var(--color-blue);
    @tablet-or-larger() {
      display: none;
    }
  }
`

const AddUserForm = styled.withComponent(StyledFormWrapper).attrs({
  'data-qa': 'qa-add-user-container',
}) `
  ${StyledButton} {
    ${props =>
    props.isDisabled &&
      styled.css `
        opacity: 0.5;
        pointer-events: none;
      `}
  }
  @tablet-or-smaller() {
    margin-bottom: rem(16);
  }
`

export { StyledButton, AddUserForm }