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

import { LineChart, LineChartProps } from '../src/components/LineChart';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta = {
  title: 'Components/Charts/LineChart',
  component: LineChart,
  tags: ['autodocs'],
  argTypes: {
    data: {
      description:
        'Data to be displayed. \n\n \
Must be an object with one of the following properties: `url` or `values` \n\n \
`url`: URL pointing to a CSV file. \n\n \
`values`: array of objects \n\n',
    },
    title: {
      description: 'Title to display on the chart.',
    },
    xAxis: {
      description:
        'Name of the column header or object property that represents the X-axis on the data.',
    },
    xAxisType: {
      description: 'Type of the X-axis.',
    },
    xAxisTimeUnit: {
      description: 'Time unit of the X-axis, in case its type is `temporal.`',
    },
    yAxis: {
      description:
        'Name of the column headers or object properties that represent the Y-axis on the data.',
    },
    yAxisType: {
      description: 'Type of the Y-axis',
    },
    symbol: {
      description:
        'Name of the column header or object property that represents a series for multiple series.',
    },
  },
};

export default meta;

type Story = StoryObj<LineChartProps>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const FromDataPoints: Story = {
  name: 'Line chart from array of data points',
  args: {
    data: {
      values: [
        { year: '1850', value: -0.41765878 },
        { year: '1851', value: -0.2333498 },
        { year: '1852', value: -0.22939907 },
        { year: '1853', value: -0.27035445 },
        { year: '1854', value: -0.29163003 },
      ],
    },
    xAxis: 'year',
    yAxis: 'value',
  },
};

export const MultiSeries: Story = {
  name: 'Line chart with multiple series (specifying symbol)',
  args: {
    data: {
      values: [
        { year: '1850', value: -0.41765878, z: 'A' },
        { year: '1851', value: -0.2333498, z: 'A' },
        { year: '1852', value: -0.22939907, z: 'A' },
        { year: '1853', value: -0.27035445, z: 'A' },
        { year: '1854', value: -0.29163003, z: 'A' },
        { year: '1850', value: -0.42993882, z: 'B' },
        { year: '1851', value: -0.30365549, z: 'B' },
        { year: '1852', value: -0.27905189, z: 'B' },
        { year: '1853', value: -0.22939704, z: 'B' },
        { year: '1854', value: -0.25688013, z: 'B' },
        { year: '1850', value: -0.4757164, z: 'C' },
        { year: '1851', value: -0.41971018, z: 'C' },
        { year: '1852', value: -0.40724799, z: 'C' },
        { year: '1853', value: -0.45049156, z: 'C' },
        { year: '1854', value: -0.41896583, z: 'C' },
      ],
    },
    xAxis: 'year',
    yAxis: 'value',
    symbol: 'z',
  },
};

export const MultiColumns: Story = {
  name: 'Line chart with multiple series (with multiple columns)',
  args: {
    data: {
      values: [
        { year: '1850', A: -0.41765878, B: -0.42993882, C: -0.4757164 },
        { year: '1851', A: -0.2333498, B: -0.30365549, C: -0.41971018 },
        { year: '1852', A: -0.22939907, B: -0.27905189, C: -0.40724799 },
        { year: '1853', A: -0.27035445, B: -0.22939704, C: -0.45049156 },
        { year: '1854', A: -0.29163003, B: -0.25688013, C: -0.41896583 },
      ],
    },
    xAxis: 'year',
    yAxis: ['A', 'B', 'C'],
  },
};

export const FromURL: Story = {
  name: 'Line chart from URL',
  args: {
    data: {
      url: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv',
    },
    title: 'Oil Price x Year',
    xAxis: 'Date',
    yAxis: 'Price',
  },
};


// export const FromURLMulti: Story = {
//   name: 'Line chart from URL Multi Column',
//   args: {
//     data: {
//       url: 'https://raw.githubusercontent.com/datasets/sea-level-rise/refs/heads/main/data/epa-sea-level.csv',
//     },
//     title: 'Sea Level Rise (1880-2023)',
//     xAxis: 'Year',
//     yAxis: ["CSIRO Adjusted Sea Level", "NOAA Adjusted Sea Level"],
//     xAxisType: 'temporal',
//     xAxisTimeUnit: 'year',
//     yAxisType: 'quantitative'
//   },
// };

// export const MultipleSeriesMissingValues: Story = {
//   name: 'Line chart with missing values',
//   args: {
//     data: {
//       values: [
//         { year: '2020', seriesA: 10, seriesB: 15 },
//         { year: '2021', seriesA: 20 },  // seriesB missing
//         { year: '2022', seriesA: 15 },  // seriesB missing
//         { year: '2023', seriesB: 30 },  // seriesA missing
//         { year: '2024', seriesA: 25, seriesB: 35 },
//         { year: '2024', seriesA: 20, seriesB: 40 },
//         { year: '2024', seriesB: 45 },
//       ],
//     },
//     title: 'Handling Missing Data Points',
//     xAxis: 'year',
//     yAxis: ['seriesA', 'seriesB'],
//     xAxisType: 'temporal',
//     xAxisTimeUnit: 'year',
//     yAxisType: 'quantitative'
//   },
// };