import React from 'react';
import { getValueOrEmptyChar } from 'src/utils/get-value-or-empty-char';
import { Link } from 'react-router-dom';
import './styles.scss';

interface StackedTextProps {
    primaryText?: string;
    primaryTextHref?: string;
    secondaryText?: string;
    showEmptyChar?: boolean;
}

const CLASS_NAME = 'StackedText';
export const CLASS_NAME_PRIMARY = `${CLASS_NAME}-primary`;
export const CLASS_NAME_SECONDARY = `${CLASS_NAME}-secondary`;

const renderText = (
    className: string,
    text?: string,
    showEmptyChar?: boolean
) => {
    if (showEmptyChar) {
        return <div className={className}>{getValueOrEmptyChar(text)}</div>;
    }

    return text ? <div className={className}>{text}</div> : null;
};

const renderPrimaryText = (
    text?: string,
    href?: string,
    showEmptyChar?: boolean
) => {
    const displayText = showEmptyChar ? getValueOrEmptyChar(text) : text;

    if (!displayText) {
        return null;
    }

    if (!href) {
        return <div className={CLASS_NAME_PRIMARY}>{displayText}</div>;
    }

    return (
        <div className={CLASS_NAME_PRIMARY}>
            <Link to={href}>{displayText}</Link>
        </div>
    );
};

const StackedText: React.FC<StackedTextProps> = ({
    primaryText,
    primaryTextHref,
    secondaryText,
    showEmptyChar,
}) => (
    <div className={CLASS_NAME}>
        {renderPrimaryText(primaryText, primaryTextHref, showEmptyChar)}
        {renderText(CLASS_NAME_SECONDARY, secondaryText, showEmptyChar)}
    </div>
);

export default StackedText;