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 { CountriesByYear, PieCharts } from './chart'

export default class Applet extends Component {
  render() {
    // console.log(this.props)
    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} />
      default:
        return <pre style={{ color: '#0f0' }}>{'Megapixels'}</pre>
    }
  }
}