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

import TimeframeFilter from './TimeframeFilter'
import { DocsTemplate } from '../../../.storybook'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof TimeframeFilter> = {
  title: '[DEPRECATED]/Components/TimeframeFilter',
  component: TimeframeFilter,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>TimeframeFilter</code> component is a specialized filter
              that allows users to quickly select pre-defined date ranges for
              data analysis or visualization. It offers three main sections:
              Current, Historical, and Quarterly/Yearly, each with specific
              options tailored to different timeframes. The Current section
              includes options like Day, Week, Month, and Year. The Historical
              section offers choices such as 1 day, 1 week, 30 days, 3 months, 6
              months, 1 year, and a custom date range from a datepicker. The
              Quarterly/Yearly section provides options for 1 year, Quarter 1,
              Quarter 2, Quarter 3, Quarter 4, and allows users to select the
              year for comparison. The filter ensures users can quickly access
              the relevant data based on various timeframes.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Implement the <code>TimeframeFilter</code> component in
              data-intensive sections where users need to analyze or visualize
              data within specific date ranges.
            </span>,
            <span key='second-bullet'>
              The Current section is the start of the current week, month, etc.
            </span>,
            <span key='third-bullet'>
              The Historical section is how many days back from today.
            </span>,
            <span key='fourth-bullet'>
              Quarterly / Yearly looks at an entire quarter of a year or an
              entire year.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof TimeframeFilter>

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

const 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',
  },
]

const timeFrame = {
  type: 'historical',
  display: '30D',
  value: 30,
  timeValue: 'day',
}

function callbackFunction() {
  toast({
    type: 'info',
    message: 'Callback function called!',
  })
}

export const DefaultTimeframe: Story = {
  ...Template,
  args: {
    callout: callbackFunction,
    timeframe: timeFrame,
    historicalTimeframes: historicalTimeframes,
    currentTimeframe: true,
    quarterlyTimeframe: true,
  },
}

export const HistoricalTimeframe: Story = {
  ...Template,
  args: {
    callout: callbackFunction,
    timeframe: timeFrame,
    historicalTimeframes: historicalTimeframes,
  },
}