import { type DateRange } from 'react-day-picker'

import { type PopoverProps } from '../Popover/Popover'
import {
  type RangeDatePickerProps,
  type SingleDatePickerProps,
} from '../DatePicker/DatePicker.models'
import { type MinMaxRange, type RangeProps } from '../RangeFilter/RangeFilter'
import {
  type MultiSelectDataItemBase,
  type MultiSelectProps,
} from '../MultiSelect/MultiSelect'
import { type SearchBarProps } from '../SearchBar/SearchBar'
import { type SelectProps } from '../Form/Select/Select'
import { type ModalProps } from '../ComponentTypes.models'
import { type TooltipProps } from '../Tooltip/Tooltip'

export type ExposedFilterNameType = {
  name: string
}

export type MultiSelectFilterPropsType<
  FilterType extends MultiSelectDataItemBase,
> = Omit<MultiSelectProps<FilterType>, 'callout'>

export type DatePickerFilterPropsType =
  | Omit<RangeDatePickerProps, 'onDateChange'>
  | Omit<SingleDatePickerProps, 'onDateChange'>

export type FilterValue<FilterType> =
  | FilterType
  | FilterType[]
  | Date
  | DateRange
  | string
  | undefined
  | MinMaxRange

export type ExposedFilterProps<
  FilterType extends MultiSelectDataItemBase & ExposedFilterNameType,
> = {
  /** State of filter */
  stateName: string
  /** Label of the filter */
  labelName: string
  /** Position of the popover */
  position?: PopoverProps['position']
  /** To disable closing the popover on scroll */
  disableCloseOnScroll?: PopoverProps['disableCloseOnScroll']
  /** Function to update filter values */
  onChangeCallout?: (stateName: string, value?: FilterValue<FilterType>) => void
  /** State to tell if filters are cleared */
  isClearFilter?: boolean
  /** State to turn off clear filter */
  setIsClearFilter?: (value: boolean) => void
  /** Custom text to display when no filter values are selected. Defaults to translated "none". */
  placeholder?: string
} &
  // When the filter is disabled, we can pass the disabledTooltip prop
  (| {
        /** State to disable the filter */
        disabled?: true
        /** Tooltip to display when the filter is disabled */
        disabledTooltip?: Omit<TooltipProps, 'children'>
      }
    | {
        /** state to enable the filter */
        disabled?: false
        /** When the filter is not disabled, we need to pass the disabledTooltip prop as undefined */
        disabledTooltip?: never
      }
  ) &
  (
    | MultiSelectFilterProps<FilterType>
    | DateFilterProps
    | SelectFilterProps<FilterType>
    | SearchFilterProps
    | RangeFilterProps
    | ModalFilterProps
  )

export interface MultiSelectFilterProps<
  FilterType extends MultiSelectDataItemBase,
> {
  /** Type of filter */
  type: 'multi-select'
  /** Props for MultiSelect (when type is multi-select) */
  multiSelectProps: MultiSelectFilterPropsType<FilterType>
}

export interface DateFilterProps {
  type: 'date'
  /** Props for DatePicker (when type is date) */
  dateProps: DatePickerFilterPropsType
}

export interface SelectFilterProps<FilterType> {
  type: 'select'
  /** Props for Select (when type is select) */
  selectProps: {
    /** Message to display when there are no options available to display */
    noOptionsMessage?: string
    /** Maximum selectable option popover height - Optional */
    maxHeight?: number | string
    /** Options for select */
    options: SelectProps<FilterType>['options']
    /** Selected option - Optional */
    selectedOption?: FilterType
  }
}

export interface SearchFilterProps {
  type: 'search'
  /** Props for SearchBar (when type is search) */
  searchBarProps: Omit<SearchBarProps, 'onChange'>
}

export interface RangeFilterProps {
  type: 'range'
  /** Props for RangeFilter (when type is range) */
  rangeProps: RangeProps
}
export interface ModalFilterProps {
  type: 'modal'
  openCallout: () => void
  // selectedOption can be a string or number; it is used only for display purposes.
  selectedOption?: (string | number)[]
  /** Props for Modal (when type is modal) */
  modalProps: ModalProps
}