import { observer } from 'mobx-react'

import { ChartData, ChartFormData, ChartTypeEnum, ContainerSize } from '../type'

import { BarChart } from './BarChart'
import { LineChart } from './LineChart'
import { PieChart } from './PieChart'

interface PropsType {
  data: ChartData | null
  formData: ChartFormData
  title: string
  containerSize?: ContainerSize
}

export const ChartRender: React.FC<React.PropsWithChildren<PropsType>> = observer(
  ({ data, formData, title, containerSize }) => {
    let chart: React.ReactNode | null = null
    switch (formData.chartType) {
      case ChartTypeEnum.Line:
        chart = <LineChart data={data} formData={formData} title={title} containerSize={containerSize} />
        break
      case ChartTypeEnum.Bar:
        chart = <BarChart data={data} formData={formData} title={title} containerSize={containerSize} />
        break
      case ChartTypeEnum.Pie:
        chart = <PieChart data={data} formData={formData} title={title} />
        break
    }
    return chart
  }
)