import styled from "styled-components";
import { Colors } from "../../styles";
import * as React from 'react';

interface Props {
    variant: 'outlined' | 'contained';
    avatar: any;
    color: Colors;
}

const StyledChip = styled.div <Props>` 

    ${ props => props.variant === 'contained' && `
        background-color: ${props.theme.colorPalette[props.color]?.main};
        color: ${props.theme.colorPalette[props.color]?.fontColor};
    `}

    ${ props => props.variant === 'outlined' && `
        background-color: transparent;
        border: 1px solid ${props.theme.colorPalette[props.color]?.main};
        color: ${props.theme.colorPalette[props.color]?.main};
    `}
    
    border-radius: 20px;
    padding: 6px;
    padding-right: 10px;
    width: fit-content;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    padding-left: 10px;
    margin-left: 5px;
    margin-top: 5px;
    word-break: break-word;

    &:hover{
        cursor: pointer;
        ${ props => props.variant === 'outlined' && `
        background-color: ${props.theme.colorPalette[props.color]?.main};
        color: ${props.theme.colorPalette[props.color]?.fontColor};
        i {
            color: ${props.theme.colorPalette[props.color]?.fontColor};
        }
    `}

    ${ props => props.variant === 'contained' && `
        background-color: transparent;
        border: 1px solid ${props.theme.colorPalette[props.color]?.main};
        color: ${props.theme.colorPalette[props.color]?.main};
        i {
            color: ${props.theme.colorPalette[props.color]?.main};
        }
    `}
    }

    &:focus {
        outline: 0;
    }

    &:active {
        transform: scale(0.95);
    }

    &:disabled,
    &:disabled:hover {
        background: gray;
        cursor: not-allowed;
    }
`;

const ImgAvatar = styled.img`
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-right: 5px;
    line-height: 20px;
`;

const LetterAvatar = styled.span<{color?: string}>`
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-right: 5px;
    background: ${props => props.color};
    font-size: 12px;
    text-align: center;
    line-height: 20px;
`;

const DeleteButton = styled.button<{color: Colors}>`
    background-color: transparent;
    margin-left: 10px;
    padding: 0px;
    border-radius: 57px;
    border: none;
    width: 20px;
    height: 20px;

    &:hover{
        cursor: pointer;
        border: 1px solid ${props => props.theme.colorPalette[props.color]?.fontColor};
        opacity: 0.8;
    }

    &:focus {
        outline: 0;
    }

    &:active {
        transform: scale(0.95);
    }
`;

export { StyledChip, ImgAvatar, LetterAvatar, DeleteButton };