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

const meta: Meta<typeof BarChart> = {
  title: 'Blocks/Chart/BarChart',
  component: BarChart,
  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%' },
      },
    },
    columnWidth: {
      control: 'text',
      description: 'Width of each column/bar as a pixel value or percentage',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '70%' },
      },
    },
    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',
    },
    horizontal: {
      description: 'Whether to display bars horizontally',
      control: 'boolean',
    },
    stacked: {
      description: 'Whether to stack the bars',
      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 BarChart>

const defaultSeries = [
  {
    name: 'Serie',
    color: 'var(--chart-blue)',
    data: [
      { x: 'Jan', y: 100 },
      { x: 'Feb', y: 200 },
      { x: 'Mar', y: 150 },
      { x: 'Apr', y: 300 },
      { x: 'May', y: 250 },
      { x: 'Jun', y: 250 },
    ],
  },
]

export const SingleBarDefault: Story = {
  args: {
    height: '260px',
    width: '600px',
    series: defaultSeries,
    showLegend: false,
    horizontal: false,
    stacked: false,
    columnWidth: '60px',
    options: {
      chart: { animations: { enabled: false }, id: 'barchart-single-default' },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const MultiBarDefault: Story = {
  args: {
    height: '300px',
    width: '75%',
    showLegend: true,
    horizontal: false,
    stacked: false,
    columnWidth: '50%',
    series: [
      {
        name: 'Series A',
        color: 'var(--chart-blue)',
        data: [
          { x: 'Jan', y: 110 },
          { x: 'Feb', y: 55 },
          { x: 'Mar', y: 215 },
          { x: 'Apr', y: 165 },
          { x: 'May', y: 125 },
          { x: 'Jun', y: 105 },
        ],
      },
      {
        name: 'Series B',
        color: 'var(--chart-green)',
        data: [
          { x: 'Jan', y: 155 },
          { x: 'Feb', y: 45 },
          { x: 'Mar', y: 230 },
          { x: 'Apr', y: 80 },
          { x: 'May', y: 225 },
          { x: 'Jun', y: 310 },
        ],
      },
      {
        name: 'Series C',
        color: 'var(--chart-yellow)',
        data: [
          { x: 'Jan', y: 140 },
          { x: 'Feb', y: 35 },
          { x: 'Mar', y: 270 },
          { x: 'Apr', y: 185 },
          { x: 'May', y: 165 },
          { x: 'Jun', y: 265 },
        ],
      },
      {
        name: 'Series D',
        color: 'var(--chart-red)',
        data: [
          { x: 'Jan', y: 110 },
          { x: 'Feb', y: 115 },
          { x: 'Mar', y: 105 },
          { x: 'Apr', y: 135 },
          { x: 'May', y: 85 },
          { x: 'Jun', y: 195 },
        ],
      },
      {
        name: 'Series E',
        color: 'var(--chart-orange)',
        data: [
          { x: 'Jan', y: 85 },
          { x: 'Feb', y: 80 },
          { x: 'Mar', y: 60 },
          { x: 'Apr', y: 45 },
          { x: 'May', y: 55 },
          { x: 'Jun', y: 70 },
        ],
      },
    ],
    options: {
      chart: { animations: { enabled: false }, id: 'barchart-multi-default' },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const StackedBarDefault: Story = {
  args: {
    height: '300px',
    width: '70%',
    showLegend: true,
    horizontal: false,
    stacked: true,
    columnWidth: '35%',
    series: [
      {
        name: 'Unsuccessful run',
        color: 'var(--chart-red)',
        data: [
          { x: 'Jan 20', y: null },
          { x: 'Jan 22', y: 1 },
          { x: 'Jan 24', y: 1 },
          { x: 'Jan 26', y: null },
          { x: 'Jan 28', y: null },
          { x: 'Jan 30', y: null },
          { x: 'Feb 2', y: 1 },
        ],
      },
      {
        name: 'Successful run',
        color: 'var(--chart-green)',
        data: [
          { x: 'Jan 20', y: 3 },
          { x: 'Jan 22', y: 3 },
          { x: 'Jan 24', y: 1 },
          { x: 'Jan 26', y: 3 },
          { x: 'Jan 28', y: 2 },
          { x: 'Jan 30', y: 4 },
          { x: 'Feb 2', y: 2 },
        ],
      },
    ],
    options: {
      chart: { animations: { enabled: false }, id: 'barchart-stacked-default' },
    },
    yAxisLabel: '',
    xAxisLabel: '',
    formatTooltipY: (value: number) => (value ? `${value}` : '0'),
  },
}

const temperatureExampleData = Array.from({ length: 24 }, (_, i) => ({
  x: i.toString().padStart(2, '0'),
  y: Math.round(15 + 10 * Math.sin((i * Math.PI) / 12) + 1),
}))

export const TemperatureExample: Story = {
  args: {
    height: '300px',
    width: '100%',
    columnWidth: '70%',
    showLegend: false,
    horizontal: false,
    stacked: 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: temperatureExampleData,
      },
    ],
    options: {
      chart: {
        animations: { enabled: false },
        id: 'barchart-temperature-example',
      },
      yaxis: { min: 0, max: 30 },
      annotations: { yaxis: [], xaxis: [], points: [] },
    },
    yAxisLabel: '',
    xAxisLabel: '',
  },
}

export const MarketCapExample: Story = {
  args: {
    height: '400px',
    width: '100%',
    columnWidth: '70%',
    showLegend: true,
    horizontal: 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: 'barchart-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.',
      },
    },
  },
}