import React from 'react';
import { GlyphIcon, CompanyIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { TruncatedText } from '../truncatedText';
import type { SuiteBadgeProps } from './types';

const CLASS_NAME = 'SuiteBadge';

export const getIndicatorIcon = (indicator: SuiteBadgeProps['indicator']) => {
    if (indicator === 'success') return 'check';
    if (indicator === 'revision') return 'revision';
    return 'warning';
};

export const SuiteBadge = ({
    className,
    style,
    testId = CLASS_NAME,
    disabled,
    brand,
    label,
    type,
    icon,
    text,
    indicator,
    onClose,
    width,
    size = 'default',
    maxWidth = '100%',
    children,
}: SuiteBadgeProps) => {
    const renderIndicator = () => {
        if (!indicator || indicator === 'crystal') return null;

        return (
            <div
                data-testid="SuiteBadgeIndicator"
                className={`${CLASS_NAME}-section ${CLASS_NAME}-indicator`}
            >
                <GlyphIcon
                    name={getIndicatorIcon(indicator)}
                    className={indicator}
                    size={type === 'pill' ? 16 : 12}
                />
            </div>
        );
    };

    return (
        <div
            data-testid={testId}
            className={cx(CLASS_NAME, className, {
                active: !!onClose || type === 'pill',
                [size]: size !== 'default',
                disabled,
            })}
            style={{ width, maxWidth, ...style }}
        >
            {brand && (
                <div
                    data-testid="SuiteBadgeBrand"
                    className={`${CLASS_NAME}-section ${CLASS_NAME}-brand`}
                >
                    <CompanyIcon name={brand} size="16" />
                </div>
            )}

            {icon && (
                <div
                    data-testid="SuiteBadgeIcon"
                    className={`${CLASS_NAME}-section ${CLASS_NAME}-icon`}
                >
                    {icon}
                </div>
            )}

            {type === 'pill' && renderIndicator()}

            {label && (
                <div
                    data-testid="SuiteBadgeLabel"
                    className={`${CLASS_NAME}-section ${CLASS_NAME}-label`}
                >
                    {label}
                </div>
            )}

            {text && (
                <TruncatedText
                    className={cx(`${CLASS_NAME}-section`, `${CLASS_NAME}-text`)}
                    testId="SuiteBadgeText"
                    text={text}
                    maxWidth={width ? undefined : 'none'}
                />
            )}

            {children && (
                <div
                    data-testid="SuiteBadgeChildren"
                    className={`${CLASS_NAME}-section ${CLASS_NAME}-children`}
                >
                    {children}
                </div>
            )}

            {type === 'tag' && renderIndicator()}

            {onClose && (
                <div
                    data-testid="SuiteBadgeCloseButton"
                    className={`${CLASS_NAME}-section ${CLASS_NAME}-close`}
                    onClick={!disabled ? onClose : undefined}
                    onKeyDown={(e) => e.key == 'Enter' && !disabled && onClose(e)}
                    tabIndex={0}
                    role="button"
                >
                    <GlyphIcon name="close" size={12} />
                </div>
            )}
        </div>
    );
};