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

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

const meta: Meta<typeof GraphLoading> = {
  title: 'Components/Loaders/GraphLoading',
  component: GraphLoading,
  parameters: {
    layout: 'padded',
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>GraphLoading</code> component provides an elegant
              animated skeleton specifically designed for chart and graph
              loading states. It creates a realistic preview of what users can
              expect to see, reducing perceived loading time and improving user
              experience during data visualization rendering.
              <br />
              <br />
              The component features sophisticated animations including
              staggered fade-ins for grid lines, progressive delays for axis
              tick marks, and a flowing wave pattern that simulates chart data.
              This creates a polished, professional loading experience that
              maintains user engagement while actual chart data is being fetched
              and processed.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              <strong>Realistic Chart Preview:</strong> Displays a skeleton that
              closely resembles the structure of common data visualizations
              including grid lines, axes, and data curves.
            </span>,
            <span key='second-bullet'>
              <strong>Smooth Animations:</strong> Features carefully timed
              animations with staggered delays that create a natural,
              progressive reveal effect.
            </span>,
            <span key='third-bullet'>
              <strong>Flexible Sizing:</strong> Supports both predefined sizes
              (small/large) and custom dimensions to fit various chart
              containers and layouts.
            </span>,
            <span key='fourth-bullet'>
              <strong>Performance Optimized:</strong> Uses CSS animations and
              SVG graphics for smooth performance across different devices and
              browsers.
            </span>,
            <span key='fifth-bullet'>
              <strong>Responsive Design:</strong> Automatically adjusts
              proportions based on size settings while maintaining visual
              integrity across different screen sizes.
            </span>,
            <span key='sixth-bullet'>
              <strong>QA Friendly:</strong> Includes test ID support for
              automated testing and quality assurance workflows.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta
type Story = StoryObj<typeof GraphLoading>

export const Default: Story = {
  args: {
    size: 'large',
  },
}

export const Small: Story = {
  args: {
    size: 'small',
  },
}

export const CustomHeight: Story = {
  args: {
    height: 300,
  },
}

export const WithCustomLineHeight: Story = {
  args: {
    size: 'large',
    lineCustomHeight: 180,
  },
}