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

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

const TimeframeDateDisplay = ({ timeframe, dateType, label }) => {
  const resultDate = getTimeframeDates(timeframe, dateType)

  return (
    <div>
      <h4>{label}</h4>
      <div>
        <strong>Input Timeframe:</strong>
        <pre>{JSON.stringify(timeframe, null, 2)}</pre>
      </div>
      <div>
        <strong>Date Type:</strong> {dateType}
      </div>
      <div>
        <strong>Result:</strong> {resultDate}
      </div>
    </div>
  )
}

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

// Historical timeframe example
const historicalTimeframe = {
  display: '30D',
  value: 30,
  timeValue: 'day',
  type: 'historical'
}

// Get the start date
const startDate = getTimeframeDates(historicalTimeframe, 'startDate')
console.log(startDate) // Output: Date string 30 days ago at start of day

// Get the end date
const endDate = getTimeframeDates(historicalTimeframe, 'endDate')
console.log(endDate) // Output: Date string for yesterday end of day

// Current timeframe example
const currentTimeframe = {
  display: 'This Month',
  timeValue: 'month',
  type: 'current'
}

const currentStartDate = getTimeframeDates(currentTimeframe, 'startDate')
console.log(currentStartDate) // Output: Date string for start of current month

const currentEndDate = getTimeframeDates(currentTimeframe, 'endDate')
console.log(currentEndDate) // Output: Date string for end of current month
`}
            description='A utility function that calculates date values based on a specified timeframe configuration. It returns formatted date strings for different types of time ranges.'
            infoBullets={[
              <span key='core-functionality'>
                Core features:
                <ul>
                  <li>
                    Generates start and end dates for various timeframe types
                  </li>
                  <li>
                    Handles historical, trailing, current, quarterly, and
                    previous timeframes
                  </li>
                  <li>Returns dates as formatted strings</li>
                </ul>
              </span>,
              <span key='timeframe-types'>
                Supported timeframe types:
                <ul>
                  <li>
                    <code>historical</code>: Fixed periods like 30D, 3M, 1Y
                  </li>
                  <li>
                    <code>trailing</code>: Rolling periods like last 24 hours,
                    last 7 days
                  </li>
                  <li>
                    <code>current</code>: Current time periods (this month, this
                    year)
                  </li>
                  <li>
                    <code>quarterly</code>: Quarter-based periods with year
                    selection
                  </li>
                  <li>
                    <code>previous</code>: Previous time periods (last month,
                    last year)
                  </li>
                </ul>
              </span>,
              <span key='use-cases'>
                Common use cases:
                <ul>
                  <li>Filtering data by specific date ranges</li>
                  <li>Setting date boundaries for charts and reports</li>
                  <li>Generating API requests with date parameters</li>
                  <li>Creating comparative date ranges for analytics</li>
                </ul>
              </span>,
              <span key='best-practices'>
                Best practices:
                <ul>
                  <li>
                    Validate timeframes using{' '}
                    <code>checkForCorrectTimeframe</code> before passing to this
                    function
                  </li>
                  <li>
                    Always specify whether you need a 'startDate' or 'endDate'
                  </li>
                  <li>
                    Handle any potential null returns with appropriate fallbacks
                  </li>
                </ul>
              </span>,
            ]}
          />
        </>
      ),
      source: {
        code: false,
      },
    },
  },
  argTypes: {
    label: {
      control: 'text',
      description: 'Label for the timeframe date calculation',
    },
    timeframe: {
      control: 'object',
      description: 'Timeframe object to calculate dates from',
    },
    dateType: {
      control: 'radio',
      options: ['startDate', 'endDate'],
      description: 'Whether to get start or end date of the timeframe',
    },
  },
} as Meta

type Story = StoryObj<typeof TimeframeDateDisplay>

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

export const Historical30Days: Story = {
  ...Template,
  args: {
    label: 'Historical 30 Days (Start Date)',
    timeframe: {
      display: '30D',
      value: 30,
      timeValue: 'day',
      type: 'historical',
    },
    dateType: 'startDate',
  },
}

export const Historical30DaysEnd: Story = {
  ...Template,
  args: {
    label: 'Historical 30 Days (End Date)',
    timeframe: {
      display: '30D',
      value: 30,
      timeValue: 'day',
      type: 'historical',
    },
    dateType: 'endDate',
  },
}

export const Trailing24Hours: Story = {
  ...Template,
  args: {
    label: 'Trailing 24 Hours (Start Date)',
    timeframe: {
      display: '24HRS',
      value: 24,
      timeValue: 'hours',
      type: 'trailing',
    },
    dateType: 'startDate',
  },
}

export const CurrentMonth: Story = {
  ...Template,
  args: {
    label: 'Current Month (Start Date)',
    timeframe: {
      display: 'This Month',
      timeValue: 'month',
      type: 'current',
    },
    dateType: 'startDate',
  },
}

export const CurrentMonthEnd: Story = {
  ...Template,
  args: {
    label: 'Current Month (End Date)',
    timeframe: {
      display: 'This Month',
      timeValue: 'month',
      type: 'current',
    },
    dateType: 'endDate',
  },
}

export const QuarterlyQ1: Story = {
  ...Template,
  args: {
    label: 'Quarterly Q1 2025 (Start Date)',
    timeframe: {
      display: '2025 Q1',
      timeValue: 'quarter',
      type: 'quarterly',
      year: '2025',
      quarter: 1,
    },
    dateType: 'startDate',
  },
}

export const PreviousYear: Story = {
  ...Template,
  args: {
    label: 'Previous Year (Start Date)',
    timeframe: {
      display: 'Last Year',
      timeValue: 'year',
      type: 'previous',
    },
    dateType: 'startDate',
  },
}

export const CustomTimeframe: Story = {
  ...Template,
  args: {
    label: 'Custom Date Range (Start Date)',
    timeframe: {
      display: '2025-01-01 - 2025-01-31',
      value: 'custom',
      timeValue: 'day',
      type: 'historical',
    },
    dateType: 'startDate',
  },
}

export const AllTimeHistorical: Story = {
  ...Template,
  args: {
    label: 'All Time Historical (Start Date)',
    timeframe: {
      display: 'All Time',
      value: 'All',
      timeValue: 'day',
      type: 'historical',
    },
    dateType: 'startDate',
  },
}