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

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

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 SingleLineDefault: Story = {
  args: {
    height: '280px',
    width: '100%',
    series: defaultSeries,
    showLegend: false,
    formatX: (value: string) =>
      new Date(value).toLocaleString('default', { month: 'short' }),
    formatY: (value: number) => value.toString(),
    formatTooltipX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'long',
        year: 'numeric',
      }),
    formatTooltipY: (value: number) => value.toString(),
    options: {
      chart: { animations: { enabled: false }, id: 'linechart-single-default' },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const MultiLineDefault: Story = {
  args: {
    height: '400px',
    width: '100%',
    showLegend: false,
    formatX: (value: string) =>
      new Date(value).toLocaleString('default', { month: 'short' }),
    formatY: (value: number) => value.toString(),
    formatTooltipX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'long',
        year: 'numeric',
      }),
    formatTooltipY: (value: number) => value.toString(),
    series: [
      {
        name: 'A',
        data: [
          { x: '2024-01-15', y: 100 },
          { x: '2024-02-15', y: 120 },
          { x: '2024-03-15', y: 90 },
          { x: '2024-04-15', y: 430 },
          { x: '2024-05-15', y: 410 },
        ],
      },
      {
        name: 'B',
        color: 'var(--chart-red)',
        data: [
          { x: '2024-01-15', y: 40 },
          { x: '2024-02-15', y: 20 },
          { x: '2024-03-15', y: 130 },
          { x: '2024-04-15', y: 300 },
          { x: '2024-05-15', y: 360 },
        ],
      },
      {
        name: 'C',
        data: [
          { x: '2024-01-15', y: 402 },
          { x: '2024-02-15', y: 63 },
          { x: '2024-03-15', y: 230 },
          { x: '2024-04-15', y: 356 },
          { x: '2024-05-15', y: 500 },
        ],
      },
    ],
    options: {
      chart: { animations: { enabled: false }, id: 'linechart-multi-default' },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const TemperatureExample: Story = {
  args: {
    height: '300px',
    width: '100%',
    showLegend: false,
    formatX: (value: string) => `${value}:00`,
    formatY: (value: number) => `${value}°C`,
    formatTooltipX: (value: string) => `${value}:00`,
    formatTooltipY: (value: number) => `${value.toFixed(1)}°C`,
    series: [
      {
        name: 'Temperature',
        color: 'var(--chart-orange)',
        data: Array.from({ length: 24 }, (_, i) => ({
          x: i.toString().padStart(2, '0'),
          y: 15 + 10 * Math.sin((i * Math.PI) / 12) + 1,
        })),
      },
    ],
    options: {
      chart: {
        animations: { enabled: false },
        id: 'linechart-temperature-example',
      },
      yaxis: { min: 0, max: 30 },
      annotations: { yaxis: [], xaxis: [], points: [] },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const CustomTooltipYFormatters: Story = {
  args: {
    height: '320px',
    width: '100%',
    showLegend: true,
    formatX: (value: string) =>
      new Date(value).toLocaleString('default', { month: 'short' }),
    formatY: (value: number) => value.toString(),
    formatTooltipX: (value: string) =>
      new Date(value).toLocaleString('default', {
        month: 'long',
        year: 'numeric',
      }),
    series: [
      {
        name: 'Count',
        data: [
          { x: '2024-01-15', y: 1200 },
          { x: '2024-02-15', y: 2100 },
          { x: '2024-03-15', y: 1800 },
          { x: '2024-04-15', y: 3400 },
        ],
      },
      {
        name: 'Revenue',
        color: 'var(--chart-green)',
        data: [
          { x: '2024-01-15', y: 4500.5 },
          { x: '2024-02-15', y: 5200.25 },
          { x: '2024-03-15', y: 4800 },
          { x: '2024-04-15', y: 6100.75 },
        ],
      },
      {
        name: 'Uptime %',
        color: 'var(--chart-blue)',
        data: [
          { x: '2024-01-15', y: 98.2 },
          { x: '2024-02-15', y: 99.1 },
          { x: '2024-03-15', y: 97.5 },
          { x: '2024-04-15', y: 99.8 },
        ],
      },
    ],
    options: {
      chart: {
        animations: { enabled: false },
        id: 'linechart-custom-tooltip-y',
      },
      tooltip: {
        shared: true,
        y: [
          { formatter: (val: number) => val.toLocaleString() },
          { formatter: (val: number) => `$${val.toFixed(2)}` },
          { formatter: (val: number) => `${val}%` },
        ],
      },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
  parameters: {
    docs: {
      description: {
        story:
          'Per-series tooltip Y formatting via options.tooltip.y: first series as locale number, second as currency, third as percentage.',
      },
    },
  },
}

export const CryptoPricesExample: Story = {
  args: {
    height: '400px',
    width: '100%',
    showLegend: false,
    formatX: (value: string) => {
      const date = new Date(value)
      return date.toLocaleDateString('en-US', {
        month: 'short',
        year: 'numeric',
      })
    },
    formatY: (value: number) => {
      const ethPrice = 2500
      const usdValue = value * ethPrice
      return `$${usdValue.toFixed(2)} (Ξ${value.toFixed(2)})`
    },
    formatTooltipX: (value: string) => {
      const date = new Date(value)
      return date.toLocaleDateString('en-US', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      })
    },
    formatTooltipY: (value: number) => {
      const ethPrice = 2500
      const usdValue = value * ethPrice
      return `$${usdValue.toFixed(2)} (Ξ${value.toFixed(4)})`
    },
    series: [
      {
        name: 'Chainlink (LINK)',
        color: 'var(--chart-blue)',
        data: [
          { x: '2021-05-01', y: 0.014336 },
          { x: '2021-11-01', y: 0.007167 },
          { x: '2022-05-01', y: 0.002798 },
          { x: '2022-11-01', y: 0.004693 },
          { x: '2023-05-01', y: 0.003663 },
          { x: '2023-11-01', y: 0.006833 },
          { x: '2024-05-01', y: 0.006579 },
        ],
      },
      {
        name: 'Avalanche (AVAX)',
        color: 'var(--chart-red)',
        data: [
          { x: '2021-05-01', y: 0.020145 },
          { x: '2021-11-01', y: 0.016721 },
          { x: '2022-05-01', y: 0.026012 },
          { x: '2022-11-01', y: 0.010673 },
          { x: '2023-05-01', y: 0.009421 },
          { x: '2023-11-01', y: 0.007512 },
          { x: '2024-05-01', y: 0.007845 },
        ],
      },
    ],
    options: {
      chart: {
        animations: { enabled: false },
        id: 'linechart-cryptoprices-example',
      },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
  parameters: {
    docs: {
      description: {
        story:
          'This chart displays the price trends of Chainlink (LINK) and Avalanche (AVAX) over the last 3 years, with data points every 6 months. Prices are shown in USD with ETH equivalents.',
      },
    },
  },
}