import React, { useCallback } from 'react';
import { CRUDProps, CRUDState } from '../../types';
import { isMobile } from '../../../../utils/helper';
import { Button } from '../../../../components';
import { Modal, Select as AntdSelect, Button as AntdButton, Input, Select, message, Popconfirm } from 'antd';
import { Icon } from '../../../../components/icons';
import { ITableStore } from '../../../../store/table';
import { CheckOutlined, CloseOutlined, DeleteOutlined, DownloadOutlined, EditOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import DefaultListPopup from '../../../../components/Lion/DefaultListPopup';
import { uuid } from '../../../Lion/utils/utils';
import { isNil } from 'lodash';
import { Drawer } from '../../../../components/antdComponentsProxy';




export interface FilterModalProps {
  props: CRUDProps;
  advanceFilterForm: any;
  filterForm: any;
  filtercont: CRUDState['filtercont'];
  filterExist: CRUDState['filterExist'];
  filterOptions: CRUDState['filterOptions'];
  advancedFilterAction: CRUDState['advancedFilterAction'];
  filtertpl: CRUDState['filtertpl'];
  templateSwitch: CRUDState['templateSwitch'];
  defaultList: CRUDState['defaultList'];
  defaultVisible: CRUDState['defaultVisible'];
  multipleDefault: CRUDState['multipleDefault'];
  selectTmpShow: CRUDState['selectTmpShow'];
  defaultTempKey: CRUDState['defaultTempKey'];
  defaultTempValue: CRUDState['defaultTempValue']
  advancedFilterVisible: CRUDState['advancedFilterVisible'];
  tableStore: ITableStore | null;
  setCrudState: (...res: any) => any;
  handlefilters: (...res: any) => any;
  search: (...res: any) => any;
  handleFilterInit: (...res: any) => any;
  getAdvancedFilterForm: (...res: any) => any;
  handleFilterSubmit: (...res: any) => any;
  handleFilterReset: (...res: any) => any;
  handlePrefix: (...res: any) => any;
  handleSaveAdvancedFilterData: (...res: any) => any;
  getFilterForm: (...res: any) => any;
  handleScrollToTop: (...res: any) => any;
  handleFilterOptions: (...res: any) => any;
  handledelVisible: (...res: any) => any;
  handleReset: (...res: any) => any;
  defaultAdvancedQuery: (val?: number, body?: any, senior?: boolean) => Promise<boolean>;
}


interface FilterModalFooterProps extends FilterModalProps {
  defaultOnOk: (...res: any) => any;
  defaultTemplate: (...res: any) => any;
  defaultModify: (...res: any) => any;
  defaultDelete: (...res: any) => any;
  handleAdvanceSearch: (...res: any) => any;
}

// 底部按钮
const AdvancedModalFooter: React.FC<FilterModalFooterProps> = (FilterModalFooterProps) => {
  const { props, defaultList, templateSwitch, advanceFilterForm, setCrudState, defaultTemplate, defaultAdvancedQuery, defaultModify, defaultDelete, defaultOnOk, handleAdvanceSearch, multipleDefault } = FilterModalFooterProps
  const { env, translate, advancedFilterApi } = props
  return <div className='defaultModal-footer'>
    {!isMobile() &&
      <div className='defaultModal-footer-left'>
        <Button level="primary" disabled={templateSwitch} onClick={() => {
          setCrudState({
            templateSwitch: true,
            multipleDefault: '',
            defaultTempKey: ''
          })
        }} >
          + 新增默认
        </Button>
        {templateSwitch ? <div className='template-name'>
          <Input placeholder="请输入模版名称" onChange={(e) => setCrudState({ multipleDefault: e.target.value ?? '' })} />
          <Button style={{ margin: 0 }} onClick={() => {
            defaultOnOk()
            setCrudState({ templateSwitch: false })
          }} >
            <CheckOutlined />
          </Button>
          <Button style={{ margin: 0 }} onClick={() => {
            setCrudState({
              templateSwitch: false,
              multipleDefault: defaultList?.[0]?.tempName,
              defaultTempKey: defaultList?.[0]?.tempKey
            })
          }} >
            <CloseOutlined />
          </Button>
        </div> :
          <div>
            {defaultList.length > 0 &&
              <Select
                // allowClear={true}
                className='defaultModal-select-content'
                dropdownClassName={`dropdown-select-style`}
                bordered
                placeholder='全部'
                style={{ textAlign: 'left' }}
                getPopupContainer={env.getModalContainer}
                defaultActiveFirstOption
                suffixIcon={
                  <Icon symbol icon={'#icon-tooltool_down'} className="icon" />
                }
                // defaultValue={defaultList.length > 0 ? defaultList[0].tempName : ''}
                value={defaultList.length > 0 ? defaultList[0].tempKey : ''}
                onSelect={(value) => {
                  const item = defaultList.find(item => item.tempKey == value)
                  defaultTemplate(item.tempKey, item.tempName)
                  defaultOnOk(item.tempName, item.tempKey)
                }}
                onChange={(value) => {
                  if (defaultList[0].tempKey == value) return
                  const item = defaultList.find(item => item.tempKey == value)
                  defaultAdvancedQuery(2, { tempName: item.tempName, tempKey: item.tempKey })
                }}
              >
                {defaultList.map(item => (
                  <Select.Option value={item.tempKey} key={item.tempKey} className='defaultModal-select-content-option'>
                    <div className='defaultModal-select-content-option-tempName'>
                      {item.tempName}
                    </div>
                    <div className='defaultModal-select-content-option-click' onClick={e => e.stopPropagation()} >
                      <EditOutlined onClick={e => defaultModify(e, item.tempKey, item.tempName)} />
                      <div>
                        <Popconfirm title="确定要删除吗?" onConfirm={() => defaultDelete(item.tempKey)} okText={translate('confirm')} cancelText={translate('cancel')} >
                          <DeleteOutlined />
                        </Popconfirm>
                      </div>
                    </div>
                  </Select.Option>
                ))}
              </Select>}
          </div>}
      </div>}
    <div className='defaultModal-footer-right'>
      {
        advancedFilterApi && <>
          {
            // 2025-02 更新逻辑为 有默认模版列表则显示设置默认按钮
            defaultList?.length ? (
              <span style={{ display: 'inline-block', marginRight: 10 }}>
                <Button disabled={templateSwitch} level="primary" onClick={() => {
                  isMobile() && setCrudState({ defaultVisible: true })
                  !isMobile() && defaultList.length > 0 && defaultOnOk(false, false, true)
                  // this.defaultAdvancedQuery(2)
                }}>
                  {translate('default')}
                </Button>
              </span>
            ) : null
          }
          {isMobile() &&
            (<span style={{ display: 'inline-block', marginRight: 10 }}>
              <Button
                className='default-select'
                onClick={() => {
                  // this.defaultAdvancedQuery(1)
                  setCrudState({ selectTmpShow: true })
                }}>
                <div className="text"> {multipleDefault || translate('application')} </div>
                <DownloadOutlined />
              </Button>
            </span>)
          }
        </>}

      <span style={{ display: 'inline-block', marginRight: 10 }}>
        <Button onClick={() => {
          advanceFilterForm?.resetAdvancedOptionsFilter()
          advanceFilterForm?.resetAdvancedFilter()
        }} >
          {translate('reset')}
        </Button>
      </span>
      <Button
        level="primary"
        onClick={handleAdvanceSearch} >
        {translate('confirm')}
      </Button>
    </div>
  </div>
}

interface FilterModalBodyProps extends FilterModalProps {
  advancedMode: string;
  handleAdvanceSearch: (...res: any) => any;
  hideAdvancedFilter: (...res: any) => any;
}

// 高级查询弹窗体
const AdvancedBody: React.FC<FilterModalBodyProps> = (FilterModalBodyProps) => {
  const { props, handleFilterInit, tableStore, getAdvancedFilterForm, advancedFilterVisible, filterOptions, filtertpl, filtercont, setCrudState, handleFilterReset, handlePrefix, handleSaveAdvancedFilterData, advancedMode, handleAdvanceSearch, hideAdvancedFilter } = FilterModalBodyProps
  const { advancedFilter, translate, render, filter, columns, advancedFilterApi, advancedQueryFields, advancedMode: _advancedMode, env } = props;


  const handleFilterOptions = useCallback((value: any) => {
    isMobile() && setCrudState({ filterOptions: value });
  }, [])

  const handleActionDisplay = useCallback((val: string) => {
    switch (val) {
      case '0':
        setCrudState({ advancedFilterAction: false });
        break;
      case '1':
      case '2':
        setCrudState({ advancedFilterAction: true });
        break;
      default:
        break;
    }
  }, [])

  return render(
    //默认
    'advancedFilter',
    {
      title: translate('CRUD.filter'),
      submitText: translate('search'),
      ...advancedFilter,
      type: 'form',
      api: null
    },
    {
      key: 'advancedFilter',
      onInit: handleFilterInit,
      formStore: undefined,
      advancedFilterVisible: isMobile() ? true : advancedFilterVisible,
      advancedFilterApi,
      showAdvancedOption: advancedMode == 'normal' || advancedMode == 'popup-normal',
      getFilterColumns: tableStore?.filteredColumns,
      getAdvancedFilterForm: getAdvancedFilterForm,
      dialogContainer: env.getTopModalContainer, // 高级查询里面要用弹窗的都用顶级
      advancedFilter,
      filterOptions,
      filtertpl,
      filtercont,
      filter,
      columns,
      advancedQueryFields,
      handlePrefix: handlePrefix,
      handleSaveAdvancedFilterData: handleSaveAdvancedFilterData,
      hideAdvancedFilter: hideAdvancedFilter,
      handleActionDisplay: handleActionDisplay,
      handleAdvanceSearch: handleAdvanceSearch,
      handleFilterOptions: handleFilterOptions,
      onReset: handleFilterReset,
    }
  )
}


// 高级查询体
const FilterModal: React.FC<FilterModalProps> = (FilterModalProps) => {
  const { props,
    advancedFilterVisible,
    filterExist,
    advancedFilterAction,
    advanceFilterForm,
    filterForm,
    filtercont,
    filtertpl,
    tableStore,
    defaultVisible,
    defaultList,
    multipleDefault,
    defaultTempKey,
    defaultTempValue,
    selectTmpShow,
    defaultAdvancedQuery,
    handleFilterSubmit,
    handleScrollToTop,
    getFilterForm,
    handleFilterOptions,
    handledelVisible,
    handlefilters,
    search,
    handleReset,
    handleFilterReset,
    setCrudState
  } = FilterModalProps
  const { filter, advancedFilter, isPick, env, translate, render, store, advancedFilterApi, tabTitle, aliasTitle, advancedMode: _advancedMode } = props
  if (!filter && !advancedFilter) return null

  const advancedMode = _advancedMode ?? 'normal' // 给个初始值
  const advancedTitle = tabTitle ?? aliasTitle ?? '';


  const hideAdvancedFilter = () => {
    setCrudState({ advancedFilterVisible: false });
  }


  const handleFilterAdvanced = () => {
    if (!isMobile() && !advancedFilter?.body?.some((item: any) => item?.body)) {
      message.error("暂无查询条件")
      return
    }
    setCrudState({ advancedFilterVisible: true });
  }

  // 搜索方法
  const handleAdvanceSearch = async () => {
    // 如果是高级查询模式，则验证 advanceFilterForm
    const res = await advanceFilterForm.validate();
    const confirmData = advanceFilterForm?.confirmAdvancedFilter();
    // 移动端的确认逻辑与PC端区别开
    if (isMobile()) {
      //删除filterParam值为空字符串的属性
      if (confirmData.filterParam) {
        for (const key in confirmData.filterParam) {
          if (Object.prototype.hasOwnProperty.call(confirmData.filterParam, key)) {
            if (confirmData.filterParam[key] === '') {
              delete confirmData.filterParam[key]
            }
          }
        }
      }
      // 如果校验没有通过，查看是快速查询还是高级查询没有通过校验，与底下的逻辑区分开
      if (!res) {
        // 区分是快速查询模式空缺还是高级查询模式空缺
        // 取到快速查询的配置
        const { filter = {} } = props;
        const { body = [] } = filter;
        // let filterParamStatus;
        // 从confirmData 拿到快速查询的值
        const { filterParam } = confirmData;
        const filterNameArr = body.filter((bodyItem: any) => bodyItem?.required).map((item: any) => item?.name?.split('.')?.pop());
        // 用现在的filterParam 查看是否有配置过滤字段，但是值是undefined的item,有则直接return
        const isFilterPause = filterNameArr.some((name: any) => isNil(filterParam[name]) || !filterParam[name].length);
        // 如果是高级查询模式下，直接return
        if (advancedFilterAction) {
          return;
        } else {
          if (isFilterPause) return;
        }
      }

    } else {
      if (!res) return;
      if (confirmData.filterParam) {
        for (const key in confirmData.filterParam) {
          if (Object.prototype.hasOwnProperty.call(confirmData.filterParam, key)) {
            if (confirmData.filterParam[key] === '') {
              delete confirmData.filterParam[key]
            }
          }
        }
      }
    }

    handleScrollToTop();
    let queryParams: any =
    {
      ...confirmData, page: 1
    }; // 添加默认设置值为1

    const optionsParam = queryParams?.filterOptionData?.rawOptionsParams
    const rawShowFields = queryParams?.filterOptionData?.rawShowFields

    if (queryParams?.limitParam.limitStatus) {
      queryParams = { ...queryParams, topN: queryParams.limitParam.topN }
    } else {
      queryParams = { ...queryParams, topN: undefined }
    }
    if (advancedMode == 'normal' || advancedMode == 'popup-normal') {
      const { itemCount, itemSumCount, showFields, sortFields, groupByFields } = optionsParam;
      if (!itemCount && !itemSumCount) {
        if (rawShowFields.length == 0) {
          message.warning('显示字段不能为空');
          return;
        }
      }

      if (sortFields.length > 0 && groupByFields.length > 0) {
        const allInclude = sortFields.every((sortField: string) => showFields.some((showField: string) => sortField.includes(showField)))
        if (!allInclude) {
          message.warning('同时使用排序和分组时，排序字段必须出现在显示字段中');
          return
        }
      }
    }

    if (isMobile() && advancedFilterVisible && filterExist) {
      setCrudState({ filterExist: false })
    }
    store.updateQuery(queryParams);
    setCrudState({ filtercont: queryParams }, () => {
      handlefilters();
      search(
        undefined,
        undefined,
        undefined,
        true,
        (res: { status: number; data: { items: { [x: string]: any; }[]; }; }) => {
          if (optionsParam?.itemCount) {
            if (res.status === 0) {
              const count = res.data.items[0]['ITEM_NUMBER']
              if (count) {
                Modal.info({ icon: null, title: '提示', content: `项数: ${count}`, okText: '确定' })
              }
            }
          }
        },
        undefined,
        undefined,
        queryParams
      );
      tableStore?.filterColumns?.clear()
      tableStore?.orderColumns?.clear()
      setCrudState({ showColumnsFilter: false })
    });
    hideAdvancedFilter();
  }


  const defaultOnOk = useCallback((tempName?: string | boolean, tempKey?: string | boolean, senior?: boolean) => {
    if (tempKey && tempName) {
      const body = {
        tempName: tempName,
        tempKey: tempKey
      }
      defaultAdvancedQuery(1, body)
      setCrudState({ selectTmpShow: false })
    } else {
      if (!!multipleDefault) {
        let body = {}
        if (defaultTempKey) {
          body = {
            tempName: multipleDefault,
            tempKey: defaultTempKey
          }
        } else {
          body = {
            tempName: multipleDefault,
            tempKey: uuid()
          }
        }

        defaultAdvancedQuery(2, body, senior)
        setCrudState({
          defaultVisible: false,
          selectTmpShow: false,
          multipleDefault: '',
          defaultTempKey: ''
        })
      } else {
        message.warning('请输入名称')
      }
    }
  }, [defaultTempKey, multipleDefault, defaultAdvancedQuery])

  const defaultTemplate = useCallback((tempKey: string, tempName: string) => {
    setCrudState({
      multipleDefault: tempName,
      defaultTempKey: tempKey
    })
  }, [])
  const defaultDelete = useCallback((tempKey: string) => {
    defaultAdvancedQuery(3, tempKey)
  }, [defaultAdvancedQuery])

  const defaultModify = useCallback((e: any, tempKey: string, tempName: string) => {
    e.stopPropagation();
    setCrudState({
      defaultVisible: true,
      multipleDefault: tempName,
      defaultTempKey: tempKey
    })
  }, [])
  const defaultClose = useCallback(() => {
    setCrudState({ defaultVisible: false, multipleDefault: '' })
  }, [])

  const renderModalHeader = () => {
    const { env, translate } = props
    return (
      <>
        <div className='title'>{translate('CRUD.advancedFilter') + (advancedTitle ? ` - ${advancedTitle}` : '')}</div>
        <div className='template'>
          <div className='template-left'>
            <QuestionCircleOutlined title={`保存：更新当前选中的模板信息\n另存为：基于现有选项创建一个新模板\n删除：删除当前选择的模板\n清除：清空当前模板条件框内数据`} />
            <span className='tip'>当前查询模板</span>
            <Select
              className='select'
              bordered={false}
              style={{ width: 155 }}
              listHeight={200}
              getPopupContainer={env.getModalContainer}
              defaultActiveFirstOption
              suffixIcon={defaultList.length > 0 ? <Icon symbol icon={'#icon-tooltool_down'} className="icon" /> : null}
              open={defaultList.length === 0 ? false : undefined}
              value={defaultTempValue}
              onChange={(value) => {
                setCrudState({ defaultTempValue: value })
                const item = defaultList.find(item => item.tempKey == value)
                if (item) {
                  defaultAdvancedQuery(2, { tempName: item.tempName, tempKey: item.tempKey })
                } else {
                  advanceFilterForm?.resetDefaultQuery()
                }
              }}
            >
              {defaultList.concat({ tempKey: 'defaultQuery', tempName: '默认查询' }).map(item => (
                <Select.Option value={item.tempKey} key={item.tempKey} >{item.tempName}</Select.Option>
              ))}
            </Select>
          </div>
          <div className='template-right'>
            <Button
              size='sm'
              onClick={() => {
                const columnInfo = defaultList.find(item => item.tempKey == defaultTempValue)?.columnInfo
                advanceFilterForm?.clearAdvancedFilter(columnInfo)
              }}>
              重置
            </Button>
            <Button
              size='sm'
              onClick={() => { advanceFilterForm?.clearDefaultQuery() }}>
              清空
            </Button>
            <Button
              disabled={defaultTempValue === 'defaultQuery'}
              size='sm'
              onClick={async () => {
                const res = await env.confirm('确认删除吗', '提示')
                if (res) { defaultDelete(defaultList[0].tempKey) }
              }}>
              删除
            </Button>
            <Button
              size='sm'
              onClick={async () => {
                const value = await env.prompt('')
                if (value) {
                  defaultAdvancedQuery(2, { tempName: value.text, tempKey: uuid() })
                }
              }}
            >
              另存为
            </Button>
            <Button
              size='sm'
              level="primary"
              disabled={defaultTempValue === 'defaultQuery'}
              onClick={async () => {
                const item = defaultList.find(item => item.tempKey == defaultTempValue)
                if (item) {
                  defaultAdvancedQuery(2, { tempKey: item.tempKey, tempName: item.tempName }, true)
                }
              }}
            >
              保存
            </Button>
          </div>
        </div>
      </>
    )
  }

  // 渲染方法
  const renderModalFooter = () => {
    return <AdvancedModalFooter {...{
      ...FilterModalProps,
      ...{
        defaultDelete,
        defaultModify,
        defaultTemplate,
        defaultOnOk,
        handleAdvanceSearch
      }
    }}>
    </AdvancedModalFooter>
  }
  const renderModalBody = () => {
    return <AdvancedBody {...{
      ...FilterModalProps,
      ...{
        advancedMode,
        hideAdvancedFilter,
        handleAdvanceSearch
      }
    }}>
    </AdvancedBody>
  }
  const RenderPCFilterModal = () => {
    if (isMobile()) {
      return <Drawer
        visible={advancedFilterVisible}
        placement="bottom"
        height={"100%"}
        zIndex={isPick ? 1012 : 1011}
        forceRender
        className={`${advancedFilter ? 'drawer-advanced' : "row-edit-drawer"}`}
        closable={false}
        getContainer={env.getTopModalContainer}
        footer={
          advancedFilter ?
            advancedFilterAction ?
              renderModalFooter() :
              <>
                <span style={{ display: 'inline-block', marginRight: 10 }}>
                  <Button onClick={(e: any) => {
                    advanceFilterForm?.resetIsModleFilter(e)
                  }}>
                    {translate('reset')}
                  </Button>
                </span>
                <Button
                  level="primary"
                  onClick={() => { handleAdvanceSearch() }} >
                  {translate('confirm')}
                </Button>
              </> :
            <AntdButton
              onClick={async () => {
                try {
                  // 将关闭Drawer逻辑放在查询逻辑之后
                  await handleFilterSubmit(filterForm.props.data)
                  hideAdvancedFilter()
                } catch {
                  // 抛出异常阻塞查询与关闭逻辑，不做处理
                }
              }}
              type='primary'>{translate('search')}</AntdButton>
        }
        bodyStyle={{ padding: 0 }}
        footerStyle={{ background: 'var(--saas-main-bg)' }}
      >
        {
          advancedFilter ?
            renderModalBody() :
            <>
              {<div className='edit-row-header Modle_edit-row-header' >
                <span className='close-edit' onClick={hideAdvancedFilter}>
                  <Icon icon='title-left' className="icon" style={{ width: '16px', height: '16px' }} />
                </span>
                <div className='close-title'>
                  搜索
                </div>
                <span className='close-edit'>
                </span>
              </div>}
              {
                render('filter', {
                  type: 'form',
                  ...filter,
                  title: '',
                  api: null
                }, {
                  className: 'Form-advanced is-mobile',
                  data: store.filterData,
                  onReset: handleFilterReset,
                  onSubmit: handleFilterSubmit,
                  formStore: null,
                  getFilterForm: getFilterForm, // Jay
                  handleFilterAdvanced: handleFilterAdvanced,
                  advancedFilter: advancedFilter,
                  advancedFilterApi: advancedFilterApi,
                  filtercont: filtercont,
                  filtertpl: filtertpl,
                  filterMap: tableStore?.filterColumns,
                  handleFilterOptions: handleFilterOptions,
                  handledelVisible: handledelVisible,
                  handleReset: handleReset
                })
              }
            </>}

      </Drawer>
    }
    else {
      return <Modal
        zIndex={9}
        title={renderModalHeader()}
        width={1000}
        className={'Modal-advanced common-modal-component'}
        bodyStyle={{ overflowY: 'auto' }}
        maskClosable={false}
        visible={advancedFilterVisible}
        onCancel={hideAdvancedFilter}
        getContainer={env.getTopModalContainer}
        footer={(
          <>
            <span style={{ display: 'inline-block', marginRight: 10 }}>
              <Button size='sm' onClick={() => { setCrudState({ advancedFilterVisible: false }) }} >
                {translate('cancel')}
              </Button>
            </span>
            <Button size='sm' level="primary" onClick={handleAdvanceSearch}>
              {translate('confirm')}
            </Button>
          </>
        )}
      >
        {renderModalBody()}
      </Modal>
    }
  }
  return <>
    {RenderPCFilterModal()}
    <DefaultListPopup
      onCancel={() => setCrudState({ defaultVisible: false })}
      defaultVisible={defaultVisible}
      defaultList={defaultList}
      defaultOnOk={defaultOnOk}
      defaultClose={defaultClose}
      defaultDelete={defaultDelete}
      multipleDefault={multipleDefault}
      onChange={(tempName) => setCrudState({ multipleDefault: tempName })}
      props={props}
      defaultModify={defaultModify}
      selectTmpShow={selectTmpShow}
      onDrawerCancel={() => setCrudState({ selectTmpShow: false })}
      defaultAdvancedQuery={defaultAdvancedQuery}
    />
  </>
};

export default FilterModal;