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

const meta: Meta<typeof RadialChart> = {
  title: 'Blocks/Chart/RadialChart',
  component: RadialChart,
  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',
    },
    startAngle: {
      control: 'number',
      description: 'The starting angle of the radial bar',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '0' },
      },
    },
    endAngle: {
      control: 'number',
      description: 'The ending angle of the radial bar',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '360' },
      },
    },
    hollow: {
      control: 'text',
      description: 'Size of the hollow center',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '70%' },
      },
    },
    tracks: {
      control: 'boolean',
      description: 'Whether to show track backgrounds',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'true' },
      },
    },
    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 RadialChart>

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

export const SingleRadialDefault: Story = {
  args: {
    height: '300px',
    width: '100%',
    series: [
      {
        name: 'Legend 1',
        color: colors[0],
        data: 75,
      },
    ],
    showLegend: true,
    startAngle: 0,
    endAngle: 360,
    tracks: true,
    hollow: '65%',
    options: { chart: { animations: { enabled: false } } },
  },
}

export const MultiRadialDefault: Story = {
  args: {
    height: '300px',
    width: '100%',
    series: [
      { name: 'Legend 1', color: colors[0], data: 75 },
      { name: 'Legend 2', color: colors[1], data: 65 },
      { name: 'Legend 3', color: colors[2], data: 55 },
      { name: 'Legend 4', color: colors[3], data: 45 },
      { name: 'Legend 5', color: colors[4], data: 35 },
    ],
    showLegend: true,
    startAngle: 0,
    endAngle: 360,
    tracks: true,
    hollow: '25%',
    options: { chart: { animations: { enabled: false } } },
  },
}

export const SkillsetExample: Story = {
  args: {
    height: '350px',
    width: '100%',
    series: [
      { name: 'TypeScript', color: colors[0], data: 90 },
      { name: 'React', color: colors[1], data: 80 },
      { name: 'Node.js', color: colors[2], data: 75 },
      { name: 'Python', color: colors[3], data: 65 },
      { name: 'GraphQL', color: colors[4], data: 60 },
    ],
    showLegend: true,
    startAngle: 0,
    endAngle: 360,
    tracks: true,
    hollow: '25%',
    options: { chart: { animations: { enabled: false } } },
  },
}

export const CryptoAdoptionExample: Story = {
  args: {
    height: '350px',
    width: '100%',
    series: [
      { name: 'Bitcoin', color: '#F7931A', data: 85 },
      { name: 'Ethereum', color: '#627EEA', data: 70 },
      { name: 'Cardano', color: '#0033AD', data: 45 },
      { name: 'Polkadot', color: '#E6007A', data: 30 },
      { name: 'Solana', color: '#00FFA3', data: 55 },
    ],
    showLegend: true,
    startAngle: 0,
    endAngle: 360,
    tracks: true,
    hollow: '40%',
    options: { chart: { animations: { enabled: false } } },
  },
  parameters: {
    docs: {
      description: {
        story:
          'This example showcases the adoption levels of various cryptocurrencies. The radial chart represents the relative popularity or market penetration of each cryptocurrency, with higher percentages indicating greater adoption.',
      },
    },
  },
}