'use client'

import React from 'react'

export const useChartTicks = (
  chartRef: React.RefObject<HTMLDivElement | null> | null,
) => {
  const [tickAmount, setTickAmount] = React.useState(8)

  React.useEffect(() => {
    if (!chartRef) return

    const calculateTickAmount = () => {
      if (!chartRef.current) return

      const containerWidth = chartRef.current.offsetWidth
      const calculatedTicks = Math.max(
        2,
        Math.min(12, Math.floor(containerWidth / 100)),
      )
      setTickAmount(calculatedTicks)
    }

    const hideEmptyTicks = () => {
      const chartSvg = chartRef?.current?.querySelector('.apexcharts-svg')
      if (!chartSvg) return

      const labels = chartSvg.querySelectorAll('.apexcharts-xaxis-label title')
      const ticks = chartSvg.querySelectorAll('line.apexcharts-xaxis-tick')

      for (let i = 0; i < ticks.length; i++) {
        const label = labels[i]
        const tick = ticks[i]
        if (label && tick) {
          const visibility = label.textContent ? 'visible' : 'hidden'
          tick.setAttribute('visibility', visibility)
        }
      }
    }

    const handleUpdates = () => {
      requestAnimationFrame(() => {
        calculateTickAmount()
        hideEmptyTicks()
      })
    }

    const mutationObserver = new MutationObserver(handleUpdates)
    mutationObserver.observe(document.body, { childList: true, subtree: true })

    const resizeObserver = new ResizeObserver(handleUpdates)
    if (chartRef.current) {
      resizeObserver.observe(chartRef.current)
    }

    window.addEventListener('resize', handleUpdates)

    handleUpdates()

    return () => {
      mutationObserver.disconnect()
      resizeObserver.disconnect()
      window.removeEventListener('resize', handleUpdates)
    }
  }, [chartRef])

  return tickAmount
}