'use client'

import type { ApexOptions } from 'apexcharts'
import React from 'react'
import { Chart, type ChartProps } from '../Chart'
import { mergeChartOptions } from '../chart.config'

type PieChartSeries = Array<{
  name: string
  color?: string
  data: number
}>

type PieChartProps = Pick<
  ChartProps,
  'options' | 'width' | 'height' | 'showLegend'
> & {
  series: PieChartSeries
  isDonut?: boolean
  donutSize?: string
}

export const PieChart = ({
  isDonut = false,
  donutSize = '50%',
  options = {},
  series,
  ...props
}: PieChartProps) => {
  const pieChartOptions = React.useMemo<ApexOptions>(
    () => ({
      chart: {
        type: isDonut ? 'donut' : 'pie',
      },
      plotOptions: {
        pie: {
          donut: {
            size: isDonut ? donutSize : '0%',
          },
          expandOnClick: false,
        },
      },
      dataLabels: {
        enabled: false,
      },
      legend: {
        position: 'bottom',
        horizontalAlign: 'center',
        fontSize: '12px',
        labels: {
          colors: 'var(--muted-foreground)',
        },
        itemMargin: {
          horizontal: 12,
        },
      },
      states: {
        hover: {
          filter: {
            type: 'none',
          },
        },
        active: {
          filter: {
            type: 'none',
          },
        },
      },
    }),
    [isDonut, donutSize],
  )

  const { colors, labels, data } = React.useMemo(
    () => ({
      colors: series.map((item) => item.color),
      labels: series.map((item) => item.name),
      data: series.map((item) => item.data),
    }),
    [series],
  )

  const mergedOptions = React.useMemo(
    () => mergeChartOptions(pieChartOptions, { colors, labels }, options),
    [pieChartOptions, colors, labels, options],
  )

  return (
    <Chart
      type={isDonut ? 'donut' : 'pie'}
      options={mergedOptions}
      series={data}
      {...props}
    />
  )
}