/**
 * Tag component
 *
 * @author Ivan Marshalkin
 * @date 2020-05-28
 */

import * as React from 'react';
import * as styles from './Tag.m.scss';
import {INTENT, SIZE} from '../../constants';
import {joinClassNames} from '../..';
import {getSizeThemeKey} from '../../utils/getSizeThemeKey';
import {getIntentThemeKey} from '../../utils/getIntentThemeKey';
import {IntentTypes} from '../../type/IntentTypes';
import {SizeClassNames} from '../../type/SizeTypes';

export type ITagProps = {
    children?: React.ReactNode;
    color: string;
    isGhost?: boolean;
    size?: SIZE;
} | {
    children?: React.ReactNode;
    intent: INTENT;
    isGhost?: boolean;
    size?: SIZE;
}

export class Tag extends React.Component<ITagProps> {
    private getStyle (color: string) {
        const {isGhost} = this.props;

        const style: React.CSSProperties = {
            borderColor: color
        };

        if (isGhost) {
            style.backgroundColor = 'transparent';
            style.color = color;
        } else {
            style.backgroundColor = color;
            style.color = 'white';
        }

        return style;
    }

    override render () {
        const {children, size, isGhost} = this.props;
        const intent = 'intent' in this.props ? this.props.intent : INTENT.DEFAULT;
        const color = 'color' in this.props ? this.props.color : undefined;
        const style = color ? this.getStyle(color) : undefined;
        const sizeThemeKey = getSizeThemeKey<SizeClassNames>('', size || SIZE.MIDDLE);
        const intentThemKey = getIntentThemeKey<IntentTypes>('', intent);

        const classNames = joinClassNames(
            styles.tag,
            styles[sizeThemeKey],
            [styles[intentThemKey], color === undefined],
            [styles.isGhost, isGhost === true]
        );

        return (
            <span style={style} className={classNames} data-component-id={'Tag'}>
                {children}
            </span>
        );
    }
}