import styled, {css} from 'styled-components';
import * as style from '@propellerads/stylevariables';

import {BADGE_TYPE, CustomStyle} from './types';

const getCustomStyle = (props: CustomStyle) => ({...props});

interface StyledBadgeContainerProps {
    type: BADGE_TYPE
    customStyle: CustomStyle
}

const StyledBadgeContainer = styled.div`
    display: inline-flex;
    align-items: center;
    padding: 0 ${style.spacing}px;
    text-transform: uppercase;
    color: ${style.white};
    border-radius: ${style.borderRadius / 2}px;
    font-size: 10px;
    line-height: 1.5;
    min-height: 16px;
        
    // Color
    ${(props: StyledBadgeContainerProps) => props.type === BADGE_TYPE.INFO && css`
        background-color: ${style.actionColor};
    `}
        
    ${(props: StyledBadgeContainerProps) => props.type === BADGE_TYPE.WARNING && css`
        background-color: ${style.warningColor};
    `}
        
    ${(props: StyledBadgeContainerProps) => props.type === BADGE_TYPE.DANGER && css`
        background-color: ${style.errorColor};
    `}
        
    ${(props: StyledBadgeContainerProps) => props.type === BADGE_TYPE.SUCCESS && css`
        background-color: ${style.successColor};
    `}
        
    // Have priority
    ${(props: StyledBadgeContainerProps) => Boolean(Object.values(props.customStyle).length) && css`
        ${getCustomStyle(props.customStyle)},
    `}
`;

const StyledBadgeIcon = styled.span`
    margin-right: ${style.spacing}px;
    display: flex;
    align-items: center;
`;

export {StyledBadgeContainer, StyledBadgeIcon};