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

const meta: Meta<typeof PieChart> = {
  title: 'Blocks/Chart/PieChart',
  component: PieChart,
  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%' },
      },
    },
    series: {
      description: 'Array of data series to be displayed in the chart.',
      control: 'object',
    },
    showLegend: {
      description: 'Whether to show the legend',
      control: 'boolean',
    },
    isDonut: {
      control: 'boolean',
      description: 'Whether to display as a donut chart',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    donutSize: {
      control: 'text',
      description: 'The size of the donut hole as a percentage',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '50%' },
      },
    },
    options: {
      description:
        'ApexCharts configuration options. Check [ApexCharts Documentation](https://apexcharts.com/docs/options/).',
      table: {
        type: { summary: 'ApexOptions' },
        defaultValue: { summary: '{}' },
      },
      control: false,
    },
  },
}

export default meta

type Story = StoryObj<typeof PieChart>

const colors = [
  'var(--chart-blue)',
  'var(--chart-green)',
  'var(--chart-yellow)',
  'var(--chart-red)',
  'var(--chart-orange)',
]

export const PieDefault: Story = {
  args: {
    height: '300px',
    width: '100%',
    series: [
      { name: 'Legend A', color: colors[0], data: 30 },
      { name: 'Legend B', color: colors[1], data: 25 },
      { name: 'Legend C', color: colors[2], data: 20 },
      { name: 'Legend D', color: colors[3], data: 15 },
      { name: 'Legend E', color: colors[4], data: 10 },
    ],
    showLegend: true,
    isDonut: false,
    donutSize: '',
    options: { chart: { animations: { enabled: false } } },
  },
}

export const DonutDefault: Story = {
  args: {
    height: '300px',
    width: '100%',
    series: [
      { name: 'Legend A', color: colors[0], data: 30 },
      { name: 'Legend B', color: colors[1], data: 25 },
      { name: 'Legend C', color: colors[2], data: 20 },
      { name: 'Legend D', color: colors[3], data: 15 },
      { name: 'Legend E', color: colors[4], data: 10 },
    ],
    showLegend: true,
    isDonut: true,
    donutSize: '50%',
    options: { chart: { animations: { enabled: false } } },
  },
}

export const BudgetAllocationExample: Story = {
  args: {
    height: '350px',
    width: '100%',
    series: [
      { name: 'Marketing', color: colors[0], data: 30 },
      { name: 'R&D', color: colors[1], data: 25 },
      { name: 'Operations', color: colors[2], data: 20 },
      { name: 'Sales', color: colors[3], data: 15 },
      { name: 'Admin', color: colors[4], data: 10 },
    ],
    showLegend: true,
    isDonut: false,
    donutSize: '',
    options: { chart: { animations: { enabled: false } } },
  },
  parameters: {
    docs: {
      description: {
        story:
          'This example illustrates budget allocation across different departments within an organization.',
      },
    },
  },
}

export const MarketShareExample: Story = {
  args: {
    height: '350px',
    width: '100%',
    series: [
      { name: 'Bitcoin (BTC)', color: '#F7931A', data: 42.7 },
      { name: 'Ethereum (ETH)', color: '#627EEA', data: 19.5 },
      { name: 'Tether (USDT)', color: '#26A17B', data: 6.8 },
      { name: 'BNB', color: '#F3BA2F', data: 4.1 },
      { name: 'Others', color: colors[4], data: 26.9 },
    ],
    showLegend: true,
    isDonut: true,
    donutSize: '45%',
    options: { chart: { animations: { enabled: false } } },
  },
  parameters: {
    docs: {
      description: {
        story:
          'This example showcases the market share distribution among top cryptocurrencies by market capitalization. The data represents approximate market share percentages as of early 2023.',
      },
    },
  },
}