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

import FactoryRenderer from "../../../../Renderer";
import { FilterExpression } from "../../data/quickFilter";

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

const Filter = (props: FilterProps) => {
  return (
    <div className="tmpl-dropdown-container" key={props.filterRow.id}>
      <span>{props.filterRow.propertyToFilter.label}</span>
      <FactoryRenderer
        value={props.filterRow.value}
        textField="label"
        listData={
          props.dataKeyRelatedValues?.[
            props.filterRow.propertyToFilter?.dataProvider?.key ?? ""
          ] ?? []
        }
        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;