import { type Meta, type StoryObj } from '@storybook/react-vite'
import React from 'react'

import { DocsTemplate } from '../../../../.storybook'
import SparkLine from './SparkLine'

const meta: Meta<typeof SparkLine> = {
  title: 'Components/Charts/SparkLine',
  component: SparkLine,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>SparkLine</code> component is a compact, simple line
              graph designed to display trends or variations in data over a
              continuous period. It’s typically used within small spaces such as
              dashboards, reports, or tables to provide a quick visual
              representation of data trends without taking up much screen real
              estate.
            </span>
          }
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof SparkLine>

const Template: Story = {
  render: (args) => {
    return <SparkLine {...args} />
  },
}

const randomData = (
  startingPoint: number,
  endingPoint: number,
  threshold: number,
  /** Keep number of data points under 31 or the demo dates won't make sense */
  dataPoints: number,
) => {
  const randomDataArray: Array<{
    data_point: number
    date: string
    threshold: number
  }> = []
  for (let day = 1; day <= dataPoints; day++) {
    const data_point =
      day === 1
        ? startingPoint
        : day === dataPoints
          ? endingPoint
          : Math.random() * 100
    randomDataArray.push({ data_point, date: `2022-10-${day}`, threshold })
  }
  return randomDataArray
}

export const Basic: Story = {
  ...Template,
  args: {
    dataKey: 'data_point',
    graphData: randomData(50, 50, 50, 10),
    thresholdKey: 'threshold',
  },
}

export const GreenLine: Story = {
  ...Template,
  args: {
    dataKey: 'data_point',
    graphData: randomData(25, 80, 60, 27),
    strokeColor: 'green',
    thresholdKey: 'threshold',
    thresholdColor: 'green',
  },
}

export const RedLine: Story = {
  ...Template,
  args: {
    dataKey: 'data_point',
    graphData: randomData(79, 17, 45, 7),
    strokeColor: 'red',
    thresholdKey: 'threshold',
    thresholdColor: 'red',
  },
}

export const NoThreshold: Story = {
  ...Template,
  args: {
    dataKey: 'data_point',
    graphData: randomData(50, 50, 50, 10),
  },
}

export const SinglePoint: Story = {
  ...Template,
  args: {
    dataKey: 'data_point',
    graphData: randomData(25, 25, 25, 1),
    thresholdKey: 'threshold',
  },
}