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

import './UniversalChart.css';

const echarts = require('echarts');

export class UniversalChartConfig extends BasicConfig {
    /**
     * CSS class
     */
    @IsString()
    className?: string;

    /**
     * 内联CSS属性
     */
    style?: CSSProperties;

    /**
     * 是否在加载
     */
    loading?: boolean;
}

export class UniversalChartPropsInterface extends BasicContainerPropsInterface {
    info: UniversalChartConfig;
}

export default class UniversalChart extends BasicContainer<UniversalChartPropsInterface, {}> {
    DOMElement: any;
    DOMID: string;
    isMount: boolean;
    chart: any;
    chartOptions: any = {};

    constructor(props: UniversalChartPropsInterface) {
        super(props);
        this.DOMID = `RCRE_UniversalChart_${Math.floor(Math.random() * 1000)}`;
    }

    componentDidMount() {
        setTimeout(() => {
            let info = this.getPropsInfo(this.props.info, this.props, [], true);
            if (!(info.config && info.config.series && info.config.series.length > 0)) {
                return;
            }
            this.chart = echarts.init(this.DOMElement);
            Object.assign(this.chartOptions, info.config);
            this.chart.setOption(this.chartOptions);
        });
    }

    shouldComponentUpdate() {
        return true;
    }

    componentDidUpdate(prevProps: UniversalChartPropsInterface) {
        let info = this.getPropsInfo(this.props.info, this.props, [], true);
        if (!(info.config && info.config.series && info.config.series.length > 0)) {
            return;
        }
        if (!this.chart) {
            this.chart = echarts.init(this.DOMElement);
        }
        Object.assign(this.chartOptions, info.config);
        this.chart.setOption(this.chartOptions, true);
    }

    render() {
        let info = this.getPropsInfo(this.props.info, this.props, [], true);
        const style = {
            width: info.width || '100%',
            height: info.height || 500,
            ...info.style
        };

        const noDatetyle = {
            width: info.width || '100%',
            height: info.noDateheight || 100,
            border: '1px solid #e9e9e9',
            textAlign: 'center',
            lineHeight: (info.noDateheight || 100) + 'px',
            borderRadius: '4px',
            color: '#5c6b77'
        };

        const refCallback = (ref: any) => {
            if (ref) {
                this.DOMElement = ref;
            }
        };

        let $loading;

        if (this.isUnderContainerEnv()) {
            $loading = this.getValueFromDataStore('$loading') || false;
        } else {
            $loading = info.loading;
        }

        let childrenElement = (
            <Spin spinning={$loading} wrapperClassName="rcre-spin">
                <div id={this.DOMID} ref={refCallback} className={info.className} style={style}/>
            </Spin>
        );

        let noDateElement = (
            <div style={noDatetyle}><span>暂无数据</span></div>
        );
        if ( (!info.config) || ( !info.config.series || info.config.series.length === 0) && !$loading) {
            this.chart = null;
            return noDateElement;
        }
        return this.renderChildren(info, childrenElement);
    }
}

componentLoader.addComponent('UniversalChart', UniversalChart, UniversalChartPropsInterface);