import type { TagProps } from 'antd';
import { Tag } from 'antd';

type TagStatusProps = {
    status?: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default' | string;
    round?: boolean;
    fill?: boolean;
    hideMarginRight?: boolean;
    mini?: boolean;
} & TagProps;

const tagColor: { [key: string]: string } = {
    successF: '#52c41a',
    success: 'green',
    errorF: '#ff4d4f',
    error: 'red',
    processingF: '#1890ff',
    processing: 'blue',
    warningF: '#faad14',
    warning: 'orange',
    defaultF: '#d9d9d9',
    default: '#fafafa',
};

const TagStatus: React.FC<TagStatusProps> = (props) => {
    const {
        round = false,
        fill = false,
        status = 'Default',
        hideMarginRight = true,
        mini = false,
        style = {},
        children,
        ...restProps
    } = props;
    const sl = status.toLowerCase();
    const tc = fill ? `${sl}F` : sl;
    const tp: any = {
        style: {
            ...style,
        },
    };
    if (hideMarginRight === true) {
        tp.style.marginRight = 0;
    }
    if (round) {
        tp.style = {
            borderRadius: 24,
            ...tp.style,
        };
    }
    if (mini) {
        tp.style = {
            lineHeight: '16px',
            padding: '0 4px',
            ...tp.style,
        };
    }
    if (sl !== 'default') {
        tp.color = tagColor[tc];
    }
    return (
        <Tag {...tp} {...restProps}>
            {children}
        </Tag>
    );
};

export default TagStatus;
