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

import { checkForCorrectTimeframe } from '../../services/TimeframeServiceTyped'
import { DocsTemplate } from '../../../.storybook'

const TimeframeValidationDisplay = ({ timeframe, label }) => {
  const isValid = checkForCorrectTimeframe(timeframe)

  return (
    <div>
      <h4>{label}</h4>
      <div>
        <pre>{JSON.stringify(timeframe, null, 2)}</pre>
      </div>
      <div>{isValid ? 'Valid ✓' : 'Invalid ✗'}</div>
    </div>
  )
}

export default {
  title: 'Helper Functions/checkForCorrectTimeframe',
  component: TimeframeValidationDisplay,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { checkForCorrectTimeframe } from '@patterninc/react-ui'

// Basic usage
const historicalTimeframe = {
  display: '30D',
  value: 30,
  timeValue: 'day',
  type: 'historical'
}

const isValid = checkForCorrectTimeframe(historicalTimeframe)
console.log(isValid) // Output: true

// Different timeframe types have different required properties
const currentTimeframe = {
  display: 'This Month',
  timeValue: 'month',
  type: 'current'
}

const isCurrentValid = checkForCorrectTimeframe(currentTimeframe)
console.log(isCurrentValid) // Output: true

//Invalid timeframe example
const invalidTimeframe = {
  display: '30D',
  type: 'historical',
}

const isInvalid = checkForCorrectTimeframe(invalidTimeframe)
console.log(isInvalid) // Output: false
  `}
            description='A utility function that validates if a timeframe object contains all required properties based on its type. This function is crucial for ensuring timeframe objects are properly structured before being used in date calculations and visualizations.'
            infoBullets={[
              <span key='core-functionality'>
                Core features:
                <ul>
                  <li>
                    Validates that timeframe objects contain all required
                    properties
                  </li>
                  <li>
                    Dynamically adjusts required properties based on the
                    timeframe type
                  </li>
                  <li>Handles null/undefined timeframe objects safely</li>
                </ul>
              </span>,
              <span key='required-properties'>
                Required properties by timeframe type:
                <ul>
                  <li>
                    All types: <code>display</code>, <code>timeValue</code>,{' '}
                    <code>type</code>
                  </li>
                  <li>
                    Historical and trailing types: additional <code>value</code>{' '}
                    property
                  </li>
                  <li>
                    Current and quarterly types: no <code>value</code> property
                    required
                  </li>
                </ul>
              </span>,
              <span key='use-cases'>
                Common use cases:
                <ul>
                  <li>
                    Validating timeframe objects before passing to date
                    calculation functions
                  </li>
                  <li>Form validation for timeframe selection components</li>
                  <li>
                    API request validation: Ensures that data sent to or
                    received from APIs is correctly structured.
                  </li>
                  <li>
                    Data integrity checks: Validates data consistency and
                    correctness.
                  </li>
                </ul>
              </span>,
              <span key='best-practices'>
                Best practices:
                <ul>
                  <li>
                    Use this function to validate timeframes before calling{' '}
                    <code>getTimeframeDates</code>
                  </li>
                  <li>
                    Implement validation early in your component lifecycle to
                    prevent downstream errors
                  </li>
                  <li>
                    Handle invalid timeframes gracefully by providing fallbacks
                  </li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
      source: {
        code: false,
      },
    },
  },
  argTypes: {
    label: {
      control: 'text',
      description: 'Label for the timeframe',
    },
    timeframe: {
      control: 'object',
      description: 'Timeframe object to validate',
    },
  },
} as Meta

type Story = StoryObj<typeof TimeframeValidationDisplay>

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

export const ValidHistoricalTimeframe: Story = {
  ...Template,
  args: {
    label: 'Valid Historical Timeframe',
    timeframe: {
      display: '30D',
      value: 30,
      timeValue: 'day',
      type: 'historical',
    },
  },
}

export const ValidTrailingTimeframe: Story = {
  ...Template,
  args: {
    label: 'Valid Trailing Timeframe',
    timeframe: {
      display: '24HRS',
      value: 24,
      timeValue: 'hours',
      type: 'trailing',
    },
  },
}

export const ValidCurrentTimeframe: Story = {
  ...Template,
  args: {
    label: 'Valid Current Timeframe',
    timeframe: {
      display: 'This Month',
      timeValue: 'month',
      type: 'current',
    },
  },
}

export const ValidQuarterlyTimeframe: Story = {
  ...Template,
  args: {
    label: 'Valid Quarterly Timeframe',
    timeframe: {
      display: '2025 Q1',
      timeValue: 'quarter',
      type: 'quarterly',
      year: '2025',
      quarter: 1,
    },
  },
}

export const InvalidTimeframeMissingTimeValue: Story = {
  ...Template,
  args: {
    label: 'Invalid Timeframe (Missing timeValue)',
    timeframe: {
      display: '30D',
      type: 'historical',
      value: 30,
    },
  },
}

export const InvalidHistoricalTimeframeMissingValue: Story = {
  ...Template,
  args: {
    label: 'Invalid Historical Timeframe (Missing value)',
    timeframe: {
      display: '30D',
      timeValue: 'day',
      type: 'historical',
    },
  },
}

export const NullTimeframe: Story = {
  ...Template,
  args: {
    label: 'Null Timeframe',
    timeframe: null,
  },
}