import { useState } from 'react'
import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart'

export const useChartActiveDataPoints = () => {
  const [activeLegends, setActiveLegends] = useState<any>([])

  const handleDotClick = (chartState: CategoricalChartState, event: any) => {
    // a work around for clicking on brush chart scroll is calling the same handler
    try {
      const activePayload = chartState.activePayload

      if (!activePayload) {
        return
      }

      const payload = activePayload![0].payload

      const itemIndex = activeLegends.findIndex((item: {id: any}) => item.id === payload.id)

      if (itemIndex === -1) {
        setActiveLegends((legends: any) => [...legends, payload])
      } else {
        setActiveLegends((legends: Array<any>) => legends.filter(item => item.id !== payload.id))
      }
    } catch (error) {
      return
    }
  }

  return [
    activeLegends,
    handleDotClick
  ]
}