import React from 'react'

import Button from '../Button/Button'
import Icon from '../Icons/Icon'
import Popover from '../Popover/Popover'
import { SideDrawer } from '../SideDrawer/SideDrawer'
import { useIsMobileView } from '../../hooks/useIsMobileView/useIsMobileView'
import Timeframe, { type AlertPropsWithDates } from './Timeframe'
import type { TimeframeProps } from './TimeframesType'
import styles from './_timeframe-filter.module.scss'

export type TimeframeFilterProps = {
  /** Function to be called when an option is clicked */
  callout: () => void
  /** Selected time frame */
  timeframe: TimeframeProps
  /** historical time frame options in a array */
  historicalTimeframes?: TimeframeProps[]
  /** Show/hide the Current timeframe sections based on this boolean value */
  currentTimeframe?: boolean
  /** Show/hide the Quarterly/Yearly timeframe sections based on this boolean value  */
  quarterlyTimeframe?: boolean
  alertProps?: AlertPropsWithDates
  /** Current path from the router */
  currentPath?: string
  /** Optional prop to add a test id to the TimeframeFilter for QA testing */
  qaTestId?: string
}

/** @deprecated */
const TimeframeFilter = ({
  alertProps,
  callout,
  historicalTimeframes,
  timeframe,
  currentTimeframe,
  quarterlyTimeframe,
  currentPath,
  qaTestId = 'timeframe-filter',
}: TimeframeFilterProps): React.JSX.Element => {
  const isMobileView = useIsMobileView()
  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false)

  const PopoverOrDrawerContent = () => (
    <Timeframe
      alertProps={alertProps}
      callout={callout}
      historicalTimeframes={historicalTimeframes}
      timeframe={timeframe}
      currentTimeframe={currentTimeframe}
      quarterlyTimeframe={quarterlyTimeframe}
      comparisonDateRange={undefined}
      getComparisonDateRange={undefined}
      customAggregations={undefined}
      startDate={undefined}
      endDate={undefined}
      currentPath={currentPath}
    />
  )
  return isMobileView ? (
    <>
      <Button
        className={styles.timeframeButtonWrapper}
        onClick={() => setIsDrawerOpen(true)}
        qaTestId={`${qaTestId}-button`}
      >
        <Icon icon='calendar' iconSize='16px' className={styles.iconStyle} />
        {timeframe.display}
      </Button>
      <SideDrawer
        isOpen={isDrawerOpen}
        closeCallout={() => setIsDrawerOpen(false)}
        headerContent=''
        qaTestId={`${qaTestId}-drawer`}
      >
        {PopoverOrDrawerContent()}
      </SideDrawer>
    </>
  ) : (
    <Popover
      popoverContent={PopoverOrDrawerContent()}
      position='right'
      className={`${styles.datepickerContainer} ${styles.timeframeFilterWrapper}`}
      qaTestId={qaTestId}
    >
      {({ visible, setVisible }) => (
        <Button
          className={styles.timeframeButtonWrapper}
          onClick={() => setVisible(!visible)}
        >
          <Icon icon='calendar' iconSize='16px' className={styles.iconStyle} />
          {timeframe.display}
        </Button>
      )}
    </Popover>
  )
}
export default TimeframeFilter