import React from 'react'
import { Spin } from 'antd'
import { connect } from 'dva'
import './loading.less'

const Loading = ({ loading, loadModels }) => {
    loadModels.unshift('loading...');
    return (
        <div className='loading-box' style={{ display: loading ? 'block' : 'none' }} >
            <Spin size="large" tip={loadModels.map((m, i) => {
                return <span key={i}>{m}</span>
            })}/>
        </div>
    );
}

function mapStateToProps(state) {
    const models = state.present.loading.models;
    let loading = false;
    let loadModels = [];
    for(let model in models) {
        if(models[model]) {
            loading = true;
            loadModels.push(model);
        }
    }
    return { loading, loadModels };
}

export default connect(mapStateToProps)(Loading)