import { styled } from 'styleh-components'
import { userSelect } from 'src/styles'
import Label from 'atoms/Text/Label'
import { SwitchIcon } from 'atoms/Icons'

const Wrapper = styled.div`
  display: flex;
  align-items: center;
`

const IconWrapper = styled.div`
  display: flex;
  margin-right: 10px;
  align-items: baseline;
`

const StyledLabel = styled.withComponent(Label)`
  font-size: 16px;
  &::selection {
    transition: all 250ms cubic-bezier(0.65, 0.05, 0.36, 1);
    background: transparent;
  }
`

const SwitchIconWrapper = styled.div`
  display: flex;
  align-items: start;

  #slider-circle {
    transition: all 500ms ease;
  }

  ${props =>
    props &&
    props.isSelected &&
    styled.css`
      color: #0772b4;
    `};
`
const SwitchLabel = styled.withComponent(Label)`
  font-size: 1rem;
  font-weight: 500;
  margin-left: rem(10);
`

const StyledSwitchIcon = styled.withComponent(SwitchIcon)`
  ${userSelect('none')};
`

const LabelWrapper = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
`

export {
  Wrapper,
  LabelWrapper,
  IconWrapper,
  StyledLabel,
  SwitchIconWrapper,
  SwitchLabel,
  StyledSwitchIcon,
}