import { useEffect } from 'react'

import { ChartContext, store } from './context'
import { View } from './DynamicForm/View'
import { ChartData, ContainerSize } from './type'

interface PropsType {
  sql?: string
  sqlFileName?: string
  className?: string
  containerSize?: ContainerSize
  chartData?: ChartData
}

const Chart: React.FC<React.PropsWithChildren<PropsType>> = ({
  sql,
  sqlFileName,
  className,
  chartData,
  containerSize
}) => {
  useEffect(() => {
    store.clearFromdata()
  }, [sql])

  useEffect(() => {
    store.updateField(sql, sqlFileName, chartData)
    store.handlePropsChange()
  }, [sql, sqlFileName, chartData?.rows, chartData?.columns])

  useEffect(() => {
    store.containerSize = containerSize
  }, [containerSize?.width, containerSize?.height])

  return (
    <ChartContext.Provider value={store}>
      <View className={className} />
    </ChartContext.Provider>
  )
}
export default Chart