/* eslint-disable @typescript-eslint/no-explicit-any */
import TypeBasedWidgetFactory from "./TypeBasedWidgetFactory";
import FactoryRenderer from "../../../../Renderer";
import { FilterTargetType, Operator } from "../../enum";
import { useEffect, useMemo } from "react";
import { getTypeBasedOperators } from "./helper/AdvancedSearchFunctions";
import {
  FilterExpressionViewModel,
  FilterTarget,
  FilterValue,
} from "../../data/advancedSearch";

interface FilterProps {
  uiElementGroupId: string;
  filterRow: FilterExpressionViewModel;
  appliedfilterCount: number;
  cache?: Record<string, any[]>;
  loadSupportiveData: (propertyToFilter: FilterTarget) => Promise<void>;
  onFilterTargetChange: (value: FilterTarget, id: string) => void;
  onOperatorChange: (
    value: { label: string; value: Operator | null },
    id: string,
  ) => void;
  onFilterValueChange: (value: FilterValue[] | FilterValue, id: string) => void;
  onCriteriaToggle: (id: string) => void;
  onAddFilter: (id: string) => void;
  onDeleteFilter: (id: string) => void;
  hasError?: boolean;
}

const Filter = (props: FilterProps) => {
  useEffect(() => {
    props.loadSupportiveData(props.filterRow?.selectedFilter?.propertyToFilter);
  }, [props.filterRow?.selectedFilter?.propertyToFilter?.value]);

  const operators = useMemo(
    () =>
      getTypeBasedOperators(
        props.filterRow?.selectedFilter?.propertyToFilter?.type,
      ),
    [props.filterRow?.selectedFilter?.propertyToFilter?.type],
  );

  return (
    <>
      <div className={`tmpl-filter tmpl-filter-border${props.hasError ? " tmpl-filter-error" : ""}`}>
        <span className="tmpl-filter-id">{props.filterRow.idLabel}</span>
        <FactoryRenderer
          value={props.filterRow.selectedFilter.propertyToFilter}
          textField="label"
          listData={props.filterRow.allPropertieseToFilter}
          title="Filter"
          defaultItem={{
            label: "Select Filter...",
            apiPropertyName: "",
            type: FilterTargetType.TEXT,
            value: null,
          }}
          enableSearch={true}
          widgetStyle={{ className: "tmpl-dropdown" }}
          rootStyle={{ className: "tmpl-dropdown-container" }}
          popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
          onChange={(callBack: any, fieldName: string, e: any) => {
            props.onFilterTargetChange(e, props.filterRow.id);
          }}
          uiElementType="WIDGET"
          widgetType="DROPDOWN"
        />

        <FactoryRenderer
          value={props.filterRow.selectedFilter.operator}
          textField="label"
          listData={operators}
          title="Operator"
          defaultItem={{ label: "Select Operator...", value: null }}
          widgetStyle={{ className: "tmpl-dropdown" }}
          rootStyle={{ className: "tmpl-dropdown-container" }}
          popupSettings={{ className: `tmpl-prvent-outside-click-close` }}
          disabled={!props.filterRow?.selectedFilter?.propertyToFilter?.value}
          onChange={(callBack: any, fieldName: string, e: any) =>
            props.onOperatorChange(e, props.filterRow.id)
          }
          uiElementType="WIDGET"
          widgetType="DROPDOWN"
        />

        <TypeBasedWidgetFactory
          filterRow={{
            ...props.filterRow,
            allValues:
              props.cache?.[
                props.filterRow?.selectedFilter?.propertyToFilter
                  .apiPropertyName ?? ""
              ] ?? [],
          }}
          onFilterValueChange={props.onFilterValueChange}
          disabled={props.filterRow?.selectedFilter?.operator?.value == null}
        />

        <FactoryRenderer
          widgetStyle={{
            className: "qo-btn qo-text-default tmpl-button-sm",
          }}
          name="plus"
          fillMode="clear"
          onClick={() => props.onAddFilter(props.filterRow.id)}
          uiElementType="WIDGET"
          widgetType="ICON"
          title="Add"
        />

        <FactoryRenderer
          name="delete"
          onClick={() => props.onDeleteFilter(props.filterRow.id)}
          uiElementType="WIDGET"
          widgetType="ICON"
          fillMode="clear"
          title="Remove"
          widgetStyle={{
            className: "qo-btn qo-text-danger tmpl-button-sm",
            inline: {
              visibility: props.appliedfilterCount === 1 ? "hidden" : "visible",
            },
          }}
        />
      </div>
      <span
        onClick={() => props.onCriteriaToggle(props.filterRow.id)}
        className="tmpl-criteria"
      >
        {props.filterRow.selectedFilter.selectedCriteria?.toString()}
      </span>
    </>
  );
};
export default Filter;