import type { Meta, StoryObj } from '@storybook/react'
import { MixedChart } from './MixedChart'

const meta: Meta<typeof MixedChart> = {
  title: 'Blocks/Chart/MixedChart',
  component: MixedChart,
  argTypes: {
    height: {
      control: 'text',
      description:
        'The height of the chart. Can be a number (in pixels) or a percentage.',
      table: {
        type: { summary: 'number | string' },
        defaultValue: { summary: '280px' },
      },
    },
    width: {
      control: 'text',
      description:
        'The width of the chart. Can be a number (in pixels) or a percentage.',
      table: {
        type: { summary: 'number | string' },
        defaultValue: { summary: '100%' },
      },
    },
    formatX: {
      description: 'Function to format X-axis labels.',
      table: {
        type: { summary: 'function' },
      },
      control: false,
    },
    formatY: {
      description: 'Function to format Y-axis labels.',
      table: {
        type: { summary: 'function' },
      },
      control: false,
    },
    formatTooltipX: {
      description: 'Function to format X values in the tooltip.',
      table: {
        type: { summary: 'function' },
      },
      control: false,
    },
    formatTooltipY: {
      description: 'Function to format Y values in the tooltip.',
      table: {
        type: { summary: 'function' },
      },
      control: false,
    },
    series: {
      description: 'Array of data series to be displayed in the chart.',
      control: 'object',
    },
    xAxisLabel: {
      description: 'Label for the X-axis',
      control: 'text',
    },
    yAxisLabel: {
      description: 'Label for the Y-axis',
      control: 'text',
    },
    showLegend: {
      description: 'Whether to show the legend',
      control: 'boolean',
    },
    stacked: {
      description: 'Whether to stack the series',
      control: 'boolean',
    },
    options: {
      description:
        'Custom ApexCharts options to be merged with the default options.',
      table: {
        type: { summary: 'object' },
      },
    },
  },
  args: {
    height: '280px',
    width: '100%',
    showLegend: true,
    series: [],
  },
}

export default meta
type Story = StoryObj<typeof MixedChart>

export const Default: Story = {
  args: {
    series: [
      {
        name: 'PRODUCT A',
        type: 'bar',
        data: [
          { x: '2021', y: 400 },
          { x: '2022', y: 430 },
          { x: '2023', y: 448 },
        ],
      },
      {
        name: 'PRODUCT B',
        type: 'bar',
        data: [
          { x: '2021', y: 200 },
          { x: '2022', y: 300 },
          { x: '2023', y: 248 },
        ],
      },
      {
        name: 'PRODUCT C',
        type: 'line',
        data: [
          { x: '2021', y: 600 },
          { x: '2022', y: 730 },
          { x: '2023', y: 648 },
        ],
      },
    ],
    options: { chart: { animations: { enabled: false } } },
  },
}

export const StackedBarAndLine: Story = {
  args: {
    ...Default.args,
    stacked: true,
  },
}