import styled, {css} from 'styled-components';
import {
  spacing,
  white,
  gray50,
  gray80,
  actionColor,
  errorColor,
  fontSmall,
  borderRadius,
} from '@propellerads/stylevariables';

interface StyledLabelProps {
    isChecked: boolean
    isDisabled: boolean
    hasError: boolean
}

const StyledLabel = styled.span`
  min-height: ${spacing * 4}px;
  position: relative;
  padding-left: ${(spacing * 4) + (spacing * 2)}px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  --box-shadow-color: ${gray80};
    
  &::before {
    transition: background .2s linear 0s;
    border-radius: ${borderRadius / 2}px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    box-shadow: 0 0 0 1px var(--box-shadow-color);
    background: ${white};
    width: ${spacing * 4}px;
    height: ${spacing * 4}px;
  }
  
  &:empty {
    padding-left: 0;
  }
  
  // Checked
  &:before {
    --box-shadow-color: ${(props: StyledLabelProps) => props.isChecked && actionColor};
    background: ${(props: StyledLabelProps) => props.isChecked && actionColor};
  }
  
  // Disabled
  color: ${(props: StyledLabelProps) => props.isDisabled && gray50};
  cursor: ${(props: StyledLabelProps) => props.isDisabled && 'not-allowed'};
  
  &:before {
    --box-shadow-color: ${(props: StyledLabelProps) => props.isDisabled && gray80};
    background: ${(props: StyledLabelProps) => props.isDisabled && gray80};
  }
  
  // Error
  &:before {
    --box-shadow-color: ${(props: StyledLabelProps) => props.hasError && errorColor};
  }
`;

const StyledDescription = styled.div`
  padding-left: ${(spacing * 4) + (spacing * 2)}px;
  margin-top: ${spacing}px;
  font-size: ${fontSmall}px;
`;

interface StyledIconProps {
    isChecked: boolean
}

const StyledIcon = styled.span`
  display: none;

  ${(props: StyledIconProps) => props.isChecked && css`
    position: absolute;
    line-height: 1;
    width: ${spacing * 4}px;
    height: ${spacing * 4}px;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  `}
`;

const StyledCheckbox = styled.label`
  position: relative;
  user-select: none;
  display: block;
  
  input {
      display: none;
  }
`;

export {
  StyledCheckbox,
  StyledIcon,
  StyledDescription,
  StyledLabel,
};