import React from 'react'
import Echarts from 'echarts-for-react'
import resolveChartOption from './resolveChartOption'

const Thumbnail = ({ type, code, option }) => {
    const newOption = resolveChartOption(option || {}, true, true);
    const viewType = ['bar', 'line', 'pie', 'scatter'].indexOf(type) !== -1 ? 'echarts' :
        (['aggregateTable', 'dataView'].indexOf(type) !== -1 ? 'table' : 'default');
        
    return (
        <div style={{ width: '100%', height: '100%' }}>
            {viewType === 'echarts' ? <Echarts
                key={code}
                option={newOption}
                className='rc-echarts'
                style={{height: '100%'}}
            /> : ( viewType === 'table' ? <div className='table-default'></div> : <div className='chart-default'></div>)}
        </div>
    );
}

export default Thumbnail;