import React from 'react';
import {Icon, Badge} from '@material-ui/core';
import {Avatar} from 'styled-material-components';
import styled from 'styled-components';
import {DivFlexDisplay} from '../layout/DivFlexDisplay';

const CustomIconImage = styled.img.attrs({
    src: props => props.image,
})`
    height: 25px;
    width: 31px;
`;

const StyledBadge = styled(({ color, ...other }) => (
    <Badge {...other} classes={{ badge: 'badge' }} />
  ))`
  & .badge{
    height: ${props => props.theme.badge.dimensions.badgeHeight};
    width: ${props => props.theme.badge.dimensions.badgeWidth};
    background-color: ${props => props.theme.badge.colors.badgeBackgroundColor};
    color: ${props => props.theme.badge.colors.badgeTextColor};
  }
  `;

const StyledAvatar = Avatar.extend`
  background-color: ${props => props.theme.avatar.colors.backgroundColor};
  border: ${props => props.theme.avatar.colors.borderColor} ${props => props.theme.avatar.dimensions.borderTickness} ${props => props.theme.avatar.types.borderType}
  font-size: ${props => props.theme.avatar.dimensions.fontSize};
  width: ${props => props.theme.avatar.dimensions.avartarWidth};
  height: ${props => props.theme.avatar.dimensions.avartarHeight};
  font-color: ${props => props.theme.avatar.colors.fontColor};
`


const Content = (props) => {
    const {theme, icon, url, badgeCounter, text, extraIcon, username } = props;
    const principalContent = icon? <Icon key='0'>{icon}</Icon>: url? <CustomIconImage image={url} key='0'/>: text? text : username? <StyledAvatar name={username} key='0'/>: null;
    const extraContent = extraIcon? <Icon key='1'>{extraIcon}</Icon>: null;
    const childrens = <DivFlexDisplay> {principalContent} {extraContent} </DivFlexDisplay>;

    if(principalContent){
        if(badgeCounter){
            return (<StyledBadge badgeContent={badgeCounter}> {childrens} </StyledBadge> );
        }

        return childrens;
    }
    console.warn('CustomIcon não retornou nenhum ícone. Verifique os props do Componente.');
    return <div />
}

class CustomIcon extends React.Component {
    render(){
    
        return(
            <Content {...this.props} />
        );  
    }

}


export default CustomIcon;