import { MultiSelectOption } from 'lib/types/options.type';
import { DefineComponent, Slot } from 'vue';
import { CalendarProps } from '../calendar/Calendar.vue.d';
import { QueryParams } from '../datatable/DataTable.vue.d';
import { DropdownProps } from '../dropdown/Dropdown.vue.d';
import { InputRangeNumberProps } from '../inputrangenumber/InputRangeNumber.vue.d';
import { MultiSelectProps } from '../multiselect/MultiSelect.vue.d';
import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.vue.d';

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';

// More specific filter field types
export interface MultiSelectFilterField extends MultiSelectProps {
  type: 'multiselect';
  /**
   * 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: string;
  optionField?: string; // @example - actionOptions
  params?: QueryParams; // Additional QueryParams for the fetchOptionFn
  fetchOptionFn?:
    | ((args?: any) => MultiSelectOption[] | undefined) // Sync function to fetch options
    | ((args?: any) => Promise<MultiSelectOption[] | undefined>); // Async function
}

export interface DropdownFilterField extends DropdownProps {
  type: 'dropdown';
  /**
   * 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: string;
  optionField?: string; // @example - actionOptions
  params?: QueryParams; // Additional QueryParams for the fetchOptionFn
  fetchOptionFn?:
    | ((args?: any) => MultiSelectOption[] | undefined) // Sync function to fetch options
    | ((args?: any) => Promise<MultiSelectOption[]> | undefined); // Async function
}

export interface RangeNumberFilterField extends InputRangeNumberProps {
  type: 'rangenumber';
  /**
   * Specify min and max field
   *
   * @example ['minAge', 'maxAge']
   */
  fields?: string[];

  /**
   * Specify single field for both min and max input.
   * The value will be a number array.
   *
   * Prever use this property when you are working with Static Filtering
   *
   * @example value: [1000,5000] or equal to 'value.0': 1000 & 'value.1': 5000
   */
  field?: string;
  tooltip?: string;
}

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

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

export type AdditionalFilterField = ButtonSelectTreeFilterField;

export type FilterField =
  | AdditionalFilterField
  | MultiSelectFilterField
  | DropdownFilterField
  | RangeNumberFilterField
  | CalendarFilterField;

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

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 type FilterContainerSlots = {
  /**
   * @deprecated Please use props.fields instead
   */
  default: Slot;

  /**
   * Additional template for field.
   */
  field: Slot<{ field: AdditionalFilterField; fieldName: string }>;
};

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 const FilterContainer: DefineComponent<
  FilterContainerProps,
  FilterContainerEmits,
  FilterContainerSlots
>;

export default FilterContainer;