import React, {useCallback, useMemo} from 'react';
import {CRUDProps, filterTpl} from '../types';
import {defaultFilterSchma} from '../../../templateSchema/crudFilter';
import {flatMap} from 'lodash';
import {Icon} from '../../../components/icons';
import {isMobile} from '../../../utils/helper';

export interface QuickFilterProps {
  props: CRUDProps;
  filterExist: boolean;
  filtercont: obj;
  filtertpl: filterTpl[];
  useMobileUI: boolean;
  isFilter: boolean;
  handleFilterReset: (...res: any) => any;
  handleFilterSubmit: (...res: any) => any;
  handleFilterInit: (...res: any) => any;
  defaultAdvancedQuery: (...res: any) => any;
  getFilterForm: (...res: any) => any;
  handleFilterAdvanced: (...res: any) => any;
  handleFilterOptions: (...res: any) => any;
  handledelVisible: (
    value: any,
    whole?: boolean,
    e?: React.MouseEvent<HTMLElement>,
    delIndex?: number
  ) => void;
  handleReset: (...res: any) => any;
  search: (...res: any) => any;
  afterSearchFn: (...res: any) => any;
}

export const QuickFilter: React.FC<QuickFilterProps> = ({
  props,
  filterExist,
  filtercont,
  filtertpl,
  useMobileUI,
  isFilter,
  handleFilterReset,
  handleFilterSubmit,
  handleFilterInit,
  defaultAdvancedQuery,
  search,
  afterSearchFn,
  getFilterForm,
  handleFilterAdvanced,
  handleFilterOptions,
  handledelVisible,
  handleReset
}) => {
  const {
    filter: _filter,
    store,
    render,
    translate: __,
    classnames: cx,
    advancedFilter = {},
    name: CRUDName,
    advancedFilterApi,
    globalFilter
  } = props;

  const filter = useMemo(() => {
    return (
      _filter ||
      defaultFilterSchma(CRUDName || '', !!advancedFilter?.body?.length)
    );
  }, [_filter, CRUDName, advancedFilter]);

  // 高级查询条件
  const columns = useMemo(() => {
    return (
      advancedFilter?.body?.find((item: any) => item.name == 'advancedFilter')
        ?.body ?? []
    );
  }, []);

  const advancedFilters = useMemo(() => {
    return advancedFilter
      ? flatMap(filtertpl, (item, index) => {
          let val;
          if (typeof item?.value === 'number') {
            if (item?.labelName?.includes(',')) {
              val = (item?.labelName as string).split(',')[0] + '...';
            } else {
              val = item?.labelName;
            }
          }
          const values = item.value;
          if (
            values &&
            typeof values == 'string' &&
            values.includes('(') &&
            values.includes(')') &&
            columns
          ) {
            // 做一个从小到大的排序
            const compareField = columns
              .filter((item: any) =>
                values.includes(item.name.split('.').pop())
              )
              .map((item: any) => item.name.split('.').pop())
              ?.sort((cur: string, next: string) => next.length - cur.length);
            let result = values.substring(1, values.length - 1);
            compareField.forEach((item: any) => {
              const match = item;
              const regex = new RegExp(match, 'g');
              const content = columns.find(
                (item: any) => item.name.split('.').pop() == match
              );
              if (content) {
                result = (result as string).replace(
                  regex,
                  `[${content.label}]`
                );
              }
            });
            val = result;
          }
          if (!(val ? val : item?.valuesAlia || item?.value)) return [];
          return {
            key: item.keyName ?? index,
            name: item.name!,
            label: item.label ?? '',
            value:
              val ?? (item?.labelName || item?.valuesAlia || item?.value || '')
          };
        })
      : undefined;
  }, [advancedFilter, filtertpl, columns]);

  const onAdvancedFilterRemove = (name: string) => {
    if (name == 'all') {
      handledelVisible(undefined, true);
    } else {
      const item = filtertpl.find(item => item.keyName === name);
      item &&
        handledelVisible(item, false, undefined, item.advancedFilterIndex);
    }
  };

  const onGlobalFilterChange = useCallback(
    (values: object) => {
      const query = {...store.query, globalFilterParam: values};
      store.updateQuery(query);
      search(undefined, undefined, undefined, true, afterSearchFn);
    },
    [store]
  );

  const panelClassName = useMemo(
    () => cx('Crud-filter', filter?.panelClassName || 'Panel--default'),
    [filter?.panelClassName]
  );
  const className = useMemo(
    () => (!!filter ? undefined : cx('Form--hidden')),
    [!!filter]
  );
  // 提取关键条件为有明确业务含义的变量
  const hasFilters = !!(filter || advancedFilters?.length || globalFilter);
  const shouldShowFilterPanel = !!(!store.filterTogggable || store.filterVisible);
  const isFilterActive = !!(filterExist || isFilter); // 假设 filterExist 和 isIsFilter 已定义
  const mobileUI = useMobileUI && isMobile();
  // 提取渲染函数，减少重复代码
  const renderMobileFilterTrigger = () => (
    <div className={cx('Mobile-filter')} onClick={handleFilterAdvanced}>
      <Icon
        icon="#icon-tooltool_filter"
        style={{fill: isFilterActive ? '#3574ee' : undefined}}
      />
      <span className={`filter-text ${isFilterActive ? 'has-filter' : ''}`}>
        {__('CRUD.filter')}
      </span>
    </div>
  );

  // 如果没有过滤器或不应显示面板，则返回null
  if (hasFilters && shouldShowFilterPanel) {
    if (!mobileUI) {
      return (
        <>
          {render(
            //默认
            'filter',
            {
              title: __('CRUD.filter'),
              mode: 'grid',
              submitText: __('search'),
              wrapWithPanel: false,
              ...filter,
              type: 'form',
              api: null,
              showHeader: true,
              sortable: true
            },
            {
              key: 'filter',
              CRUDName,
              className: className,
              panelClassName,
              data: store.filterData,
              formStore: undefined,
              advancedFilterVisible: false,
              advancedFilterApi,
              advancedFilter: advancedFilter,
              filtercont: filtercont,
              advancedFilters: advancedFilters,
              onAdvancedFilterRemove,
              globalFilters: globalFilter ? globalFilter.body : null,
              onGlobalFilterChange,
              onReset: handleFilterReset,
              onSubmit: handleFilterSubmit,
              onInit: _filter ? handleFilterInit : undefined,
              defaultAdvancedQuery: defaultAdvancedQuery,
              getFilterForm: getFilterForm, // Jay
              handleFilterAdvanced: handleFilterAdvanced,
              handleFilterOptions: handleFilterOptions,
              handledelVisible: handledelVisible,
              handleReset: handleReset
            }
          )}
        </>
      );
    } else {
      return renderMobileFilterTrigger();
    }
  } else if (mobileUI && advancedFilter) {
    return renderMobileFilterTrigger();
  }
  return null;
};