import React from 'react';
import './thumbnail.less';

const Thumbnail = ({ style, type, code, thumbnail }) => {
    let children;
    
    switch(type) {
        case 'bar':
        case 'line':
        case 'pie':
        case 'scatter':
            children = thumbnail ? <img className='chart-thumbnail chart-thumbnail-echarts' alt={code} src={thumbnail} />
            : <div className='chart-thumbnail chart-thumbnail-empty'></div>
            break;
        case 'aggregateTable':
            children = <div className='chart-thumbnail chart-thumbnail-aggregateTable'></div>
            break;
        case 'dataView':
            children = <div className='chart-thumbnail chart-thumbnail-table'></div>
            break;
        case 'indicator':
            children = <div className='chart-thumbnail chart-thumbnail-indicator'></div>
            break;
        default:
            children = <div className='chart-thumbnail chart-thumbnail-empty'></div>
            break;
        
    }
    
    return (
        <div style={{ ...style, width: '100%', height: '100%' }}>
            { children }
        </div>
    );
}

export default Thumbnail;