import React from 'react';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { DatePicker, Input } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { ProFormCascader, ProFormSelect } from '@ant-design/pro-components';
import { SearchOutlined } from '@ant-design/icons';

interface FilterItemConfig {
  type: 'input' | 'select' | 'cascader';
  key: string;
  label: string;
  placeholder?: string;
  request?: () => Promise<any[]>;
}

interface FilterBarProps {
  computeDate: string;
  onDateChange: (dateString: string) => void;
  filterConf: FilterItemConfig[];
  inputValues: Record<string, any>;
  onInputChange: (key: string, value: string) => void;
  onInputSearch: (key: string, value?: string) => void;
  onSelectChange: (key: string, value: any) => void;
  onCascaderChange: (key: string, value: any[] | null) => void;
}

/**
 * 筛选栏组件：
 * - 受控的核算年月选择器
 * - 根据 filterConf 动态渲染 input/select/cascader
 */
export default function FilterBar(props: FilterBarProps) {
  const {
    computeDate,
    onDateChange,
    filterConf,
    inputValues,
    onInputChange,
    onInputSearch,
    onSelectChange,
    onCascaderChange,
  } = props;

  return (
    <>
      <div className="filterItem">
        <div className="search">
          <span>核算年月：</span>
          <DatePicker
            onChange={(data, dateString) => onDateChange(dateString)}
            picker="month"
            locale={locale}
            value={computeDate ? moment(computeDate, 'YYYY-MM') : undefined}
            format="YYYY-MM"
            autoComplete="off"
            placeholder="选择年月"
          />
        </div>
      </div>
      {filterConf.map((item) => {
        const { type, key, label, placeholder, request } = item as any;
        if (type === 'input') {
          return (
            <div
              className="filterItem"
              style={{ marginLeft: 16, width: 205 }}
              key={key}
            >
              <span className="label" style={{ whiteSpace: 'nowrap' }}>
                {label}
              </span>
              <Input
                placeholder={placeholder || ''}
                allowClear
                autoComplete="off"
                suffix={
                  <SearchOutlined
                    style={{ color: '#99A6BF' }}
                    onClick={() => onInputSearch(key, inputValues[key] || '')}
                  />
                }
                value={inputValues[key] || ''}
                onChange={(e) => {
                  const value = e.target.value;
                  onInputChange(key, value);
                  if (value.length === 0) {
                    onInputSearch(key, '');
                  }
                }}
                onPressEnter={(e) =>
                  onInputSearch(key, (e.target as HTMLInputElement).value)
                }
              />
            </div>
          );
        }
        if (type === 'select') {
          return (
            <div className="filterItem" style={{ marginLeft: 16 }} key={key}>
              <span className="label">{label}</span>
              <ProFormSelect
                noStyle
                allowClear
                placeholder="请选择"
                style={{ width: 160, marginRight: 16 }}
                request={async () => {
                  const arr = request ? await request() : [];
                  return arr || [];
                }}
                fieldProps={{
                  onChange(value) {
                    onSelectChange(key, value);
                  },
                }}
              />
            </div>
          );
        }
        if (type === 'cascader') {
          return (
            <div className="filterItem" style={{ marginLeft: 16 }} key={key}>
              <span className="label">{label}</span>
              <ProFormCascader
                noStyle
                allowClear
                placeholder="请选择"
                request={async () => {
                  const resp = request ? await request() : [];
                  return resp || [];
                }}
                fieldProps={{
                  showSearch: true,
                  fieldNames: {
                    label: 'responsibilityName',
                    value: 'responsibilityCode',
                    children: 'child',
                  },
                  onChange(value: any) {
                    onCascaderChange(key, value);
                  },
                }}
              />
            </div>
          );
        }
        return <React.Fragment key={key} />;
      })}
    </>
  );
}
