import * as React from 'react';
import {BasicConfig, BasicContainer, BasicContainerPropsInterface} from '../../render/core/Container/types';
import componentLoader from '../../render/util/componentLoader';
import {Icon} from '@native-ads/antd';

export class TrendConfig extends BasicConfig {
    /**
     * up: 红色
     * down: 绿色
     */
    flag: 'up' | 'down' | 'normal';

    /**
     * 显示的值
     */
    text: string;
}

export class TrendPropsInterface extends BasicContainerPropsInterface {
    info: TrendConfig;
}

export class AbstractTrend extends BasicContainer<TrendPropsInterface, {}> {
    constructor(props: TrendPropsInterface) {
        super(props);
    }

    render() {
        let info = this.getPropsInfo(this.props.info);

        let icon;
        let color;

        switch (info.flag) {
            case 'up':
                color = '#FF5B5B';
                icon = <Icon type="arrow-up" style={{color: color}}/>;
                break;
            case 'down':
                color = '#5BC49F';
                icon = <Icon type="arrow-down" style={{color: color}}/>;
                break;
            case 'normal':
            default:
                break;
        }

        const trendStyle = Object.assign({
            height: '25px',
            lineHeight: '25px'
        }, info.style);
        return (
            <div className="rcre-trend" style={trendStyle}>
                <span style={{color: color}}>{info.text}</span>
                {icon}
            </div>
        );
    }
}

componentLoader.addComponent('trend', AbstractTrend, TrendPropsInterface);