/* eslint-disable @typescript-eslint/no-explicit-any */

import FactoryRenderer from "../../../../Renderer";
import { FilterExpression, FilterValue } from "../../data/quickFilter";
import { ValueLoadType } from "../../type";

interface FilterProps {
  filterRow: FilterExpression;
  dataKeyRelatedValues?: Record<string, any[]>;
  onQuickFilterApply: (
    id: string,
    value: { label: string; value: any },
  ) => void;
}

const Filter = (props: FilterProps) => {
  const dataProvider = props.filterRow.propertyToFilter?.dataProvider;
  // SELF-loaded values are self-contained on the dataProvider, so read them
  // directly instead of the key-based map (which requires a `key` to resolve).
  const listData =
    dataProvider?.valueLoadType === ValueLoadType.SELF
      ? ((dataProvider.value as FilterValue[]) ?? [])
      : (props.dataKeyRelatedValues?.[dataProvider?.key ?? ""] ?? []);

  return (
    <div className="tmpl-dropdown-container" key={props.filterRow.id}>
      <span className="qo-label">{props.filterRow.propertyToFilter.label}</span>
      <FactoryRenderer
        value={props.filterRow.value}
        textField="label"
        listData={listData}
        title="Filter"
        defaultItem={{ label: "Select...", value: null }}
        widgetStyle={{ className: "tmpl-dropdown" }}
        rootStyle={{ className: "tmpl-dropdown-container" }}
        popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
        onChange={(callBack: any, fieldName: string, e: any) =>
          props.onQuickFilterApply(props.filterRow.id, e)
        }
        uiElementType="WIDGET"
        widgetType="DROPDOWN"
      />
    </div>
  );
};
export default Filter;