import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { Colors } from '../../styles';
import { Icon } from '../../surface';
import * as React from 'react';
import { DeleteButton, ImgAvatar, LetterAvatar, StyledChip } from './styled-chip';

interface Props {
    children: React.ReactNode;
    style?: React.CSSProperties;
    type: 'checked' | 'deletable' | 'basic';
    variant: 'outlined' | 'contained';
    color: Colors;
    avatar?: {
        type: 'img' | 'text',
        color?: string;
        value: string,
    };
    icon?: IconProp;
    onClick?: any;
}

const Chip = (props: Props) => {
    return(
        <StyledChip
            variant={props.variant}
            style={{...props.style}}
            onClick={props.onClick}
            avatar={props.avatar}
            color={props.color}
        >
            {props.icon &&
                <Icon
                    name={props.icon}
                    style={{marginRight: 10}}
                />
            }
            {props.avatar &&
                <>
                    {props.avatar.type === 'img' &&
                        <ImgAvatar src={props.avatar.value} />
                    }
                    {props.avatar.type === 'text' &&
                        <LetterAvatar
                            color={props.avatar.color}
                        >
                            {props.avatar.value}
                        </LetterAvatar>
                    }
                </>
            }

            {props.children}

            {props.type === 'checked' &&
                <Icon
                    name='check'
                    style={{marginLeft: 10}}
                />
            }

            {props.type === 'deletable' &&
                <DeleteButton
                    color={props.color}
                >
                    <Icon 
                        name='times'
                    />
                </DeleteButton>
            }
        </StyledChip>
    )
}

Chip.defaultProps = {
    type: 'basic',
    variant: 'contained',
    color: 'primary'
}

export default Chip;