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

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

export const Example = (): React.JSX.Element => {
  return (
    <div>
      <h3>Historical Timeframes:</h3>
      <pre> {JSON.stringify(historicalTimeframes, null, 2)} </pre>
    </div>
  )
}
Example.storyName = 'HISTORICAL_TIMEFRAMES'

export default {
  title: 'Helper Variables/HISTORICAL_TIMEFRAMES',
  component: Example,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`
  import { historicalTimeframes, Timeframe, getTimeframeDates } from '@patterninc/react-ui'
  
  // Full array structure
  const timeframeOptions = historicalTimeframes;
  /*
    [
      { id: 1, display: '1D', value: 1, timeValue: 'day', type: 'historical' },
      { id: 2, display: '1W', value: 1, timeValue: 'week', type: 'historical' },
      { id: 3, display: '30D', value: 30, timeValue: 'day', type: 'historical' },
      { id: 4, display: '3M', value: 3, timeValue: 'month', type: 'historical' },
      { id: 5, display: '6M', value: 6, timeValue: 'month', type: 'historical' },
      { id: 6, display: '1Y', value: 1, timeValue: 'year', type: 'historical' }
    ]
  */
  
  // Use with Timeframe component
  const handleTimeframeChange = (
   calloutType, 
        startDate, 
        endDate, 
        timeframe
  ) => {
    console.log('Selected timeframe:', timeframe);
    console.log('Date range:', startDate.format('L'), 'to', endDate.format('L'));
  };
  
  const initialTimeframe = {
    type: 'historical',
    display: '30D',
    value: 30,
    timeValue: 'day'
  };
  
  <Timeframe
    callout={handleTimeframeChange}
    timeframe={initialTimeframe}
    historicalTimeframes={historicalTimeframes}
    currentTimeframe={true}
    quarterlyTimeframe={true}
    hideCustomDateSearch={false}
  />
  
  // Access specific timeframe
  const thirtyDayTimeframe = historicalTimeframes.find(t => t.display === '30D');
  
  // Calculate date range for a specific timeframe
  const timeframe = thirtyDayTimeframe;
  const startDate = getTimeframeDates(timeframe, 'startDate');
  const endDate = getTimeframeDates(timeframe, 'endDate');
  
  // Start date will be 30 days ago from today, at the start of that day
  console.log(moment(startDate).format('YYYY-MM-DD HH:mm:ss'));
  
  // End date will typically be yesterday at end of day
  console.log(moment(endDate).format('YYYY-MM-DD HH:mm:ss'));
`}
            description='A predefined collection of historical timeframe options used throughout the application for consistent date range filtering and data visualization.'
            infoBullets={[
              <span key='core-features'>
                Core features:
                <ul>
                  <li>
                    Standardized set of common historical time periods (1D, 1W,
                    30D, 3M, 6M, 1Y)
                  </li>
                  <li>
                    Designed for use with the <code>Timeframe</code> and{' '}
                    <code>TimeframeFilter</code> components
                  </li>
                  <li>
                    Compatible with date calculation functions like{' '}
                    <code>getTimeframeDates</code>
                  </li>
                </ul>
              </span>,
              <span key='structure-properties'>
                Structure and properties:
                <ul>
                  <li>
                    <code>id</code>: Unique identifier
                  </li>
                  <li>
                    <code>display</code>: label shown in UI (e.g., "30D")
                  </li>
                  <li>
                    <code>value</code>: Numeric amount of time (e.g., 30 for 30
                    days)
                  </li>
                  <li>
                    <code>timeValue</code>: Time unit ("day", "week", "month",
                    "year")
                  </li>
                  <li>
                    <code>type</code>: Always "historical" to distinguish from
                    other timeframe types
                  </li>
                </ul>
              </span>,
              <span key='common-use-cases'>
                Common use cases:
                <ul>
                  <li>Date range selection in analytics dashboards</li>
                  <li>Filtering data in reports and visualizations</li>
                  <li>Setting default time periods for initial data load</li>
                  <li>
                    Creating consistent time comparison options across features
                  </li>
                </ul>
              </span>,
              <span key='best-practices'>
                Best practices:
                <ul>
                  <li>
                    Use with <code>getTimeframeDates</code> to calculate actual
                    start and end dates
                  </li>
                  <li>
                    Set <code>initialTimeframe</code> to a value from this array
                    for consistent defaults
                  </li>
                  <li>
                    Pass directly to <code>Timeframe</code> component's{' '}
                    <code>historicalTimeframes</code> prop
                  </li>
                  <li>
                    Validate selected timeframes with{' '}
                    <code>checkForCorrectTimeframe</code> before using
                  </li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
      source: {
        code: false,
      },
    },
  },
} as Meta<typeof Example>