import { useMemo } from 'react';
import { Tooltip } from 'antd';

import TrimmedText from '../TrimmedText/TrimmedText';

import './KeyValueLabel.styles.scss';

type KeyValueLabelProps = {
	badgeKey: string | React.ReactNode;
	badgeValue: string;
	maxCharacters?: number;
};

export default function KeyValueLabel({
	badgeKey,
	badgeValue,
	maxCharacters = 20,
}: KeyValueLabelProps): JSX.Element | null {
	const isUrl = useMemo(() => /^https?:\/\//.test(badgeValue), [badgeValue]);

	if (!badgeKey || !badgeValue) {
		return null;
	}

	return (
		<div className="key-value-label">
			<div className="key-value-label__key">
				{typeof badgeKey === 'string' ? (
					<TrimmedText text={badgeKey} maxCharacters={maxCharacters} />
				) : (
					badgeKey
				)}
			</div>
			{isUrl ? (
				<a
					href={badgeValue}
					target="_blank"
					rel="noopener noreferrer"
					className="key-value-label__value"
				>
					<TrimmedText text={badgeValue} maxCharacters={maxCharacters} />
				</a>
			) : (
				<Tooltip title={badgeValue}>
					<div className="key-value-label__value">
						<TrimmedText text={badgeValue} maxCharacters={maxCharacters} />
					</div>
				</Tooltip>
			)}
		</div>
	);
}

KeyValueLabel.defaultProps = {
	maxCharacters: 20,
};
