/**
 * Component for render link in app
 *
 * @author Brauer Ilya
 * @date 2021-05-14
 */
import * as React from 'react';
import {Link as ReactLink, LinkProps} from 'react-router-dom';
import {joinClassNames, LINK_INTENT, SIZE} from '../..';
import {Divider} from '../../component';
import {getSizeThemeKey} from '../../utils/getSizeThemeKey';
import {getIntentThemeKey} from '../../utils/getIntentThemeKey';
import * as styles from './link.m.scss';

interface IProps extends Omit<LinkProps, 'prefix'> {
    prefix?: React.ReactNode;
    suffix?: React.ReactNode;
    intent?: LINK_INTENT;
    size?: SIZE.LARGE | SIZE.MIDDLE | SIZE.SMALL | SIZE.EXTRA_SMALL;
    noWrap?: boolean;
    'data-qaid'?: string;
    delimeter?: string;
    inline?: boolean;
}

export class Link extends React.PureComponent<IProps> {

    renderDivider () {
        if (!this.props.delimeter) {
            return (
                <Divider orientation={'vertical'} offset={4}/>
            );
        }

        return (
            <>&nbsp;{this.props.delimeter}&nbsp;</>
        );
    }

    renderPrefix () {
        if (!this.props.prefix) {
            return null;
        }

        return (
            <span className={styles.prefix}>
                {this.props.prefix}
                {this.renderDivider()}
            </span>
        );
    }

    renderSuffix () {
        if (!this.props.suffix) {
            return null;
        }

        return (
            <span className={styles.suffix}>
                {this.renderDivider()}
                {this.props.suffix}
            </span>
        );
    }

    override render () {
        const {
            size = SIZE.MIDDLE,
            intent = LINK_INTENT.DEFAULT,
            noWrap,
            inline,
            prefix,
            suffix,
            ...linkProps
        } = this.props;

        const sizeThemeKey = getSizeThemeKey<keyof typeof styles>('', size);
        const intentThemeKey = getIntentThemeKey<keyof typeof styles>('', intent);

        const className = joinClassNames(
            styles.linkContainer,
            [styles.noWrap, noWrap === true],
            [styles.inline, inline === true],
            styles[sizeThemeKey],
            styles[intentThemeKey]
        );

        return (
            <span className={className}>
                {this.renderPrefix()}
                <ReactLink {...linkProps}>
                    {this.props.children}
                </ReactLink>
                {this.renderSuffix()}
            </span>
        );
    }
}