'use client'

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

type MixedChartProps = ChartProps & {
  stacked?: boolean
}

export const MixedChart = ({
  options = {},
  series,
  stacked = false,
  ...props
}: MixedChartProps) => {
  const mixedChartOptions = React.useMemo<ApexOptions>(
    () => ({
      chart: { stacked },
      stroke: {
        width: 2,
      },
      plotOptions: {
        bar: {
          columnWidth: '35%',
          borderRadius: 0,
        },
      },
      fill: { opacity: 1 },
      xaxis: {
        axisBorder: {
          offsetY: 0.5,
        },
        crosshairs: { show: true },
      },
      legend: {
        show: true,
        position: 'bottom',
        horizontalAlign: 'center',
        offsetY: 8,
        fontSize: '12px',
        inverseOrder: true,
        fontWeight: 400,
        fontFamily: 'Inter',
        itemMargin: {
          horizontal: 12,
        },
        labels: {
          colors: 'var(--muted-foreground)',
          useSeriesColors: false,
        },
        markers: {
          size: 5,
          strokeWidth: 0,
          offsetX: -4,
          shape: 'circle',
        },
      },
      title: {
        align: 'left',
        offsetY: -4,
        style: {
          fontSize: '24px',
          fontWeight: 500,
          fontFamily: 'Inter',
          color: 'var(--foreground-alt)',
        },
      },
      subtitle: {
        align: 'left',
        style: {
          fontSize: '12px',
          fontWeight: 400,
          fontFamily: 'Inter',
          color: 'var(--muted-foreground)',
        },
      },
      states: {
        hover: { filter: { type: 'none' } },
        active: { filter: { type: 'none' } },
      },
    }),
    [series, stacked],
  )

  const mergedOptions = React.useMemo(
    () => mergeChartOptions(mixedChartOptions, options),
    [mixedChartOptions, options],
  )

  return <Chart options={mergedOptions} series={series} {...props} />
}