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

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

export const InitialTimeframeExample = (): React.JSX.Element => {
  return (
    <div>
      <h3>Initial Timeframe:</h3>
      <pre>{JSON.stringify(initialTimeframe, null, 2)}</pre>
    </div>
  )
}
InitialTimeframeExample.storyName = 'INITIAL_TIMEFRAME'

export default {
  title: 'Helper Variables/INITIAL_TIMEFRAME',
  component: InitialTimeframeExample,
  parameters: {
    viewMode: 'docs',
    previewTabs: {
      canvas: { hidden: true },
    },
    docs: {
      page: () => (
        <>
          <DocsTemplate
            code={`import { initialTimeframe } from '@patterninc/react-ui'
  /*
    {
        type: 'historical',
        display: '30D',
        value: 30,
        timeValue: 'day',
    };
  */
  // Usage example
  const timeframe = initialTimeframe;
  // or in a component
  const [timeframe, setTimeframe] = useState(initialTimeframe),
  console.log('Initial Timeframe:', timeframe);
`}
            description='The initialTimeframe variable defines a default historical timeframe for use in applications, ensuring consistent date range selection.'
            infoBullets={[
              <span key='core-features'>
                Core features:
                <ul>
                  <li>Represents a default timeframe of 30 days</li>
                  <li>Used to set initial date ranges in components</li>
                </ul>
              </span>,
              <span key='structure-properties'>
                Structure and properties:
                <ul>
                  <li>
                    <code>type</code>: Always "historical"
                  </li>
                  <li>
                    <code>display</code>: UI label ("30D")
                  </li>
                  <li>
                    <code>value</code>: Numeric amount (30)
                  </li>
                  <li>
                    <code>timeValue</code>: Time unit ("day")
                  </li>
                </ul>
              </span>,
              <span key='common-use-cases'>
                Common use cases:
                <ul>
                  <li>Setting default time periods for components</li>
                  <li>Ensuring consistent initial data views</li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
      source: {
        code: false,
      },
    },
  },
} as Meta<typeof InitialTimeframeExample>