import { AxiosResponse } from 'axios';
import { VNode } from 'vue';

import { DropdownProps, Option } from '../dropdown';

import { ButtonSelectTreeProps } from '../buttonselecttree';
import { CalendarProps } from '../calendar';
import { QueryParams } from '../datatable';
import { InputRangeNumberProps } from '../inputrangenumber';
import { MultiSelectProps } from '../multiselect';
import {
  ClassComponent,
  GlobalComponentConstructor,
  StringKeyOf,
  TypeError,
} from '../ts-helpers';

export type FilterMatchMode =
  | 'CONTAINS'
  | 'EQUALS'
  | 'NOT_EQUALS'
  | 'IN'
  | 'LESS_THAN'
  | 'LESS_THAN_OR_EQUAL_TO'
  | 'GREATER_THAN'
  | 'GREATER_THAN_OR_EQUAL_TO'
  | 'BETWEEN'
  | 'DATE_BETWEEN';

type BaseSelectField<OptionsQueryParams extends QueryParams> = {
  /**
   * Represents a function type for fetching options based on query parameters.
   *
   * @template OptionsQueryParams - The type of query parameters, extending `QueryParams`. Defaults to `any`.
   *
   * This function can have one of the following signatures:
   * - A synchronous function that takes query parameters and returns an array of `Option` objects.
   * - An asynchronous function that takes query parameters and returns a `Promise` resolving to an array of `Option` objects.
   * - An asynchronous function that takes query parameters and returns a `Promise` resolving to an `AxiosResponse` containing a `FetchOptionResponse` object.
   *
   * @param args - The query parameters of type `T` used to fetch the options.
   * @returns One of the following:
   * - An array of `Option` objects.
   * - A `Promise` resolving to an array of `Option` objects.
   * - A `Promise` resolving to an `AxiosResponse` containing a `FetchOptionResponse` object.
   */
  fetchOptionFn?(
    args: OptionsQueryParams,
  ): Option[] | Promise<Option[]> | Promise<AxiosResponse<FetchOptionResponse>>;

  /**
   * Whether to fetch options when the component is mounted. Useful when the dropdown/multiselect has an initial value.
   * For now, this is only applicable to quickfilter, though filtercontainer support can be added.
   */
  fetchOnMount?: boolean;
  optionField?: keyof OptionsQueryParams; // @example - actionOptions
  params?: OptionsQueryParams; // Additional QueryParams for the fetchOptionFn
};

export interface MultiSelectFilterField<OptionsQueryParams extends QueryParams>
  extends BaseSelectField<OptionsQueryParams>,
    Omit<MultiSelectProps, 'fieldName' | 'options'> {
  type: 'multiselect';
}

export interface DropdownFilterField<OptionsQueryParams extends QueryParams>
  extends BaseSelectField<OptionsQueryParams>,
    Omit<DropdownProps, 'fieldName' | 'options'> {
  type: 'dropdown';
}

type RangeNumberFilterField<Field extends string> =
  | (InputRangeNumberProps & {
      type: 'rangenumber';
      /**
       * Specify min and max field
       *
       * @example ['minAge', 'maxAge']
       */
      fields: [Field, Field];
      field?: TypeError<'`field` must not be specified when using `fields` property'>;
      tooltip?: string;
    })
  | (InputRangeNumberProps & {
      type: 'rangenumber';
      /**
       * Specify single field for both min and max input.
       * The value will be a number array.
       *
       * Prefer using this property when working with Static Filtering
       *
       * @example value: [1000, 5000] or equivalent to 'value.0': 1000 & 'value.1': 5000
       */
      field: Field;
      fields?: TypeError<'`fields` must not be specified when using `field` property'>;
      tooltip?: string;
    });

export interface ButtonSelectTreeFilterField<
  Field extends string,
  Params = QueryParams,
> extends Omit<ButtonSelectTreeProps, 'type' | 'label' | 'fieldLabel'> {
  type: 'group' | 'category';
  field: Field; // The name of the field this filter applies to
  /**
   * The field label.
   */
  label?: string;
  /**
   * The button label.
   * @default to Select Group|Category
   */
  buttonLabel?: string;
  params?: Params; // Override QueryParams for the fetchTree
}

export interface CalendarFilterField extends CalendarProps {
  type: 'calendar';
}

export type AdditionalFilterField<Field extends string = string> =
  ButtonSelectTreeFilterField<Field>;

export type BaseFilterField<Params extends QueryParams = QueryParams> = {
  /**
   * Filter field visibility
   *
   * You dont need manually filter, this component already handle it.
   */
  visible?: boolean;
  /**
   * The name of the field this filter applies to.
   *
   * When using a static filter, it also specifies the field in the data to be used for generating unique options.
   * For example, if filtering by a user's full name, the field could be 'user.fullName', which will extract
   * unique full names from the table data and use them as filter options.
   */
  field: keyof Params;
};

export type FilterField<
  Params extends QueryParams = QueryParams,
  OptionsQueryParams extends QueryParams = QueryParams,
> =
  | (BaseFilterField<Params> &
      (
        | AdditionalFilterField<StringKeyOf<Params>>
        | MultiSelectFilterField<OptionsQueryParams>
        | DropdownFilterField<OptionsQueryParams>
        | CalendarFilterField
      ))
  | (Omit<BaseFilterField<Params>, 'field'> &
      RangeNumberFilterField<StringKeyOf<Params>>);

export type FilterOptions<Opt = Record<string, boolean>> = Record<
  keyof Opt,
  Option[]
>;

export type LoadingFilters = Record<string, boolean>;

export type FetchOptionResponse<Opt = Record<string, boolean>> = {
  message: string;
  data: FilterOptions<Opt>;
};

export interface FilterContainerLocaleConfig {
  clearFieldText?: string;
  applyText?: string;
}

export interface FilterContainerProps {
  /**
   * Specify the table name integrated with this filter.
   *
   * @default datatable - the default table name
   */
  tableName?: string;
  /**
   * Set the fields count in a row
   *
   * @default 4 grid columns
   */
  fieldsPerRow?: number;
  fields: FilterField[];
  /**
   * Enable static filtering
   */
  static?: boolean;
}

/**
 * Slots for FilterContainer component
 */
export interface FilterContainerSlots {
  /**
   * Additional template for field.
   */
  field: (props: {
    field: AdditionalFilterField;
    fieldName: string;
  }) => VNode[];
}

export type FilterContainerEmits = {
  apply: [filter: QueryParams];
};

/**
 * **WangsVue - FilterContainer**
 *
 * _FilterContainer is a component for generating a dynamic grid-based layout for any count of filter fields.
 * It calculates the number of children in the container and sets their grid area style dynamically.
 *
 * The grid layout is determined by the row and column position, which are incremented based on the child count.
 * If the child count is odd and the child is the last one (which is Buttons Action),
 * it is placed in the 4th column._
 *
 * @group components
 */
declare class FilterContainer extends ClassComponent<
  FilterContainerProps,
  FilterContainerSlots,
  FilterContainerEmits
> {}

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    FilterContainer: GlobalComponentConstructor<FilterContainer>;
  }
}

export default FilterContainer;