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

const meta: Meta<typeof AreaChart> = {
  title: 'Blocks/Chart/AreaChart',
  component: AreaChart,
  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 areas',
      control: 'boolean',
    },
    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 AreaChart>

const defaultSeries = [
  {
    name: 'A',
    data: [
      { x: '2024-01-01', y: 100 },
      { x: '2024-02-01', y: 200 },
      { x: '2024-03-01', y: 150 },
      { x: '2024-04-01', y: 300 },
      { x: '2024-05-01', y: 250 },
    ],
  },
]

export const SingleAreaDefault: Story = {
  args: {
    height: '280px',
    width: '100%',
    series: defaultSeries,
    showLegend: false,
    stacked: false,
    formatX: (value: string) =>
      new Date(value).toLocaleString('default', { month: 'short' }),
    formatTooltipX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'long',
        year: 'numeric',
      }),
    options: {
      chart: { animations: { enabled: false }, id: 'areachart-single-default' },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const MultiAreaDefault: Story = {
  args: {
    height: '400px',
    width: '100%',
    showLegend: false,
    stacked: false,
    formatX: (value: string) =>
      new Date(value).toLocaleString('default', { month: 'short' }),
    formatTooltipX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'long',
        year: 'numeric',
      }),
    options: {
      chart: { animations: { enabled: false }, id: 'areachart-multi-default' },
    },
    series: [
      {
        name: 'A',
        color: 'var(--chart-green)',
        data: [
          { x: '2024-01-15', y: 100 },
          { x: '2024-02-15', y: 120 },
          { x: '2024-03-15', y: 150 },
          { x: '2024-04-15', y: 180 },
          { x: '2024-05-15', y: 220 },
        ],
      },
      {
        name: 'B',
        color: 'var(--chart-blue)',
        data: [
          { x: '2024-01-15', y: 50 },
          { x: '2024-02-15', y: 60 },
          { x: '2024-03-15', y: 75 },
          { x: '2024-04-15', y: 90 },
          { x: '2024-05-15', y: 110 },
        ],
      },
      {
        name: 'C',
        color: 'var(--chart-purple)',
        data: [
          { x: '2024-01-15', y: 10 },
          { x: '2024-02-15', y: 12 },
          { x: '2024-03-15', y: 15 },
          { x: '2024-04-15', y: 18 },
          { x: '2024-05-15', y: 22 },
        ],
      },
    ],
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const RainfallExample: Story = {
  args: {
    height: '350px',
    width: '100%',
    showLegend: false,
    stacked: false,
    formatX: (value: string) =>
      new Date(value).toLocaleString('default', { month: 'short' }),
    formatY: (value: number) => `${value} mm`,
    formatTooltipX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'long',
        year: 'numeric',
      }),
    formatTooltipY: (value: number) => `${value.toFixed(1)} mm`,
    series: [
      {
        name: 'Rainfall',
        color: 'var(--chart-blue)',
        data: Array.from({ length: 12 }, (_, i) => ({
          x: new Date(Date.UTC(2024, i, 1)).toISOString().slice(0, 10),
          y: Math.round(60 + 40 * Math.sin((i * Math.PI) / 6)),
        })),
      },
    ],
    options: {
      chart: {
        animations: { enabled: false },
        id: 'areachart-rainfall-example',
      },
      yaxis: { min: 0, max: 120 },
      annotations: { yaxis: [], xaxis: [], points: [] },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const MarketCapExample: Story = {
  args: {
    height: '400px',
    width: '100%',
    showLegend: false,
    stacked: false,
    formatX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'short',
        year: '2-digit',
      }),
    formatY: (value: number) => `$${(value / 1000).toFixed(1)}B`,
    formatTooltipX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'long',
        year: 'numeric',
      }),
    formatTooltipY: (value: number) => `$${(value / 1000).toFixed(2)}B`,
    series: [
      {
        name: 'Chainlink (LINK)',
        color: 'var(--chart-blue)',
        data: [
          { x: '2021-05-01', y: 15800 },
          { x: '2021-11-01', y: 14500 },
          { x: '2022-05-01', y: 3500 },
          { x: '2022-11-01', y: 3600 },
          { x: '2023-05-01', y: 3400 },
          { x: '2023-11-01', y: 7100 },
          { x: '2024-05-01', y: 9300 },
        ],
      },
      {
        name: 'Avalanche (AVAX)',
        color: 'var(--chart-red)',
        data: [
          { x: '2021-05-01', y: 5600 },
          { x: '2021-11-01', y: 29800 },
          { x: '2022-05-01', y: 7100 },
          { x: '2022-11-01', y: 4200 },
          { x: '2023-05-01', y: 5300 },
          { x: '2023-11-01', y: 7900 },
          { x: '2024-05-01', y: 11200 },
        ],
      },
    ],
    options: {
      chart: {
        animations: { enabled: false },
        id: 'areachart-marketcap-example',
      },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
  parameters: {
    docs: {
      description: {
        story:
          'This chart compares the market capitalization of Chainlink (LINK) and Avalanche (AVAX) over the last 3 years, with data points every 6 months.',
      },
    },
  },
}

export const HistoricalTrend: Story = {
  args: {
    height: 280,
    width: '100%',
    showLegend: false,
    stacked: false,
    formatX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'short',
        year: '2-digit',
      }),
    formatTooltipX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'long',
        year: 'numeric',
      }),
    series: [
      {
        name: 'LINK-JUP',
        color: 'var(--chart-blue)',
        data: [
          ...Array.from({ length: 48 }, (_, i) => ({
            x: new Date(Date.UTC(2020, i, 1)).toISOString().slice(0, 10),
            y: 1000,
          })),
          {
            x: '2024-12-01',
            y: 100,
          },
        ],
      },
    ],
    options: {
      chart: {
        animations: { enabled: false },
        id: 'areachart-historical-trend',
      },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}