import React, { Component } from 'react'

// import { Container as FaceSearchContainer } from './faceSearch'
// import { Container as FaceAnalysisContainer } from './faceAnalysis'
// import { Container as NameSearchContainer } from './nameSearch'
import { Container as DatasetListContainer } from './datasetList'
import { CitationsTable, FileTable } from './table'
import { CountriesByYear, PieCharts, SinglePieChart } from './chart'

export default class Applet extends Component {
  render() {
    // console.log(this.props.payload.cmd)
    switch (this.props.payload.cmd) {
      // case 'face_analysis':
      //   return <FaceAnalysisContainer {...this.props} />
      // case 'face_search':
      //   return <FaceSearchContainer {...this.props} />
      // case 'name_search':
      //   return <NameSearchContainer {...this.props} />
      case 'dataset_list':
        return <DatasetListContainer {...this.props} />
      case 'chart':
        return <CountriesByYear {...this.props} />
      case 'piechart':
        return <PieCharts {...this.props} />
      case 'single_pie_chart':
        return <SinglePieChart {...this.props} />
      case 'citations':
        return <CitationsTable {...this.props} />
      case 'load_file':
        return <FileTable {...this.props} />
      default:
        return <pre style={{ color: '#0f0' }}>{'Megapixels'}</pre>
    }
  }
}