/**
 * The "stub" component. Used for displaying a placeholder for content.
 *
 * @author Brauer Ilya
 *
 * @date 2020-05-06
 */

import * as React from 'react';
import * as styles from './contentPlaceholder.m.scss';
import {INTENT, SIZE} from '../../constants';
import {getIntentThemeKey} from '../../utils/getIntentThemeKey';
import {joinClassNames} from '../../utils/joinClassNames';
import {systemIconData, SystemIconName} from '@unidata/icon';
import {getSizeThemeKey} from '../../utils/getSizeThemeKey';

interface IProps {
    iconName: SystemIconName;
    mainText?: React.ReactNode;
    mainTextColor?: React.ReactNode;
    subText?: React.ReactNode;
    subTextColor?: React.ReactNode;
    iconSize?: SIZE; // for now only Middle and Large
    intent?: INTENT; // for now only Primary and Danger
    onMainClick?: () => void;
    onSubClick?: () => void;
}

export class ContentPlaceholder extends React.PureComponent<IProps, {}> {
    renderIcon () {
        let iconName = this.props.iconName || 'search';

        const iconSize = this.props.iconSize || SIZE.MIDDLE;
        const sizeThemeKey = getSizeThemeKey<keyof typeof styles>('icon', iconSize);
        const iconSvgProps = systemIconData[iconName] ? systemIconData[iconName].svg : {};

        const svgProps: React.SVGProps<SVGSVGElement> = {
            ...iconSvgProps,
            className: styles[sizeThemeKey],
            dangerouslySetInnerHTML: systemIconData[iconName] && systemIconData[iconName].content ?
                {__html: systemIconData[iconName].content} : undefined
        };

        return <svg {...svgProps} />;
    }

    override render () {
        const {
            mainText = '',
            mainTextColor = '',
            subText = '',
            subTextColor = '',
            onMainClick,
            onSubClick,
            intent = INTENT.PRIMARY
        } = this.props;

        const intentKey = getIntentThemeKey<keyof typeof styles>('', intent);

        const containerClassName = joinClassNames(
            styles.content,
            styles[intentKey]
        );

        return (
            <div className={containerClassName}>
                {this.renderIcon()}
                <div className={styles.mainText}>
                    {mainText}
                    &nbsp;
                    <span className={styles.color} onClick={onMainClick}>{mainTextColor}</span>
                </div>
                <div className={styles.subText}>
                    {subText}
                    &nbsp;
                    <span className={styles.color} onClick={onSubClick}>{subTextColor}</span>
                </div>
            </div>
        );
    }
}