import React from 'react';
import { Input, Button, DatePicker } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useIntl, FormattedMessage } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux';
import dayjs from 'dayjs';
import {
  setId,
  setName,
  setAccNo,
  setStartTime,
  setEndTime,
  // setStatus,
  setPage,
  setPageSize,
} from '../../../states/patient/worklist/slices/searchSlice';
import { fetchWorkThunk } from '../../../states/patient/worklist/slices/workSlice';
import { fetchBinThunk } from '../../../states/patient/bin/slices/binSlice';
import { AppDispatch, RootState } from '../../../states/store';
import { WorkFilter } from '@/states/patient/worklist/types/workfilter';
import { BinFilter } from '@/states/patient/bin/types/binFilter';
import TimeRangeSelector from './TimeRangeSelector';
// import { AnyAction } from '@reduxjs/toolkit';

const { RangePicker } = DatePicker;

const SearchPanel: React.FC = () => {
  const intl = useIntl();
  const dispatch = useDispatch<AppDispatch>();
  const id = useSelector((state: RootState) => state.search.id);
  const name = useSelector((state: RootState) => state.search.name);
  const accNo = useSelector((state: RootState) => state.search.acc_no);
  const startTime = useSelector((state: RootState) => state.search.start_time);
  const endTime = useSelector((state: RootState) => state.search.end_time);
  const currentKey = useSelector(
    (state: RootState) => state.BusinessFlow.currentKey
  );

  return (
    <div className="flex flex-col gap-2 w-full">
      <Input
        placeholder={intl.formatMessage({
          id: 'searchPanel.name',
          defaultMessage: 'searchPanel.name',
        })}
        prefix={<SearchOutlined />}
        size="small"
        value={name}
        onChange={(e) => dispatch(setName(e.target.value))}
      />
      <Input
        placeholder={intl.formatMessage({
          id: 'searchPanel.patientId',
          defaultMessage: 'searchPanel.patientId',
        })}
        prefix={<SearchOutlined />}
        size="small"
        value={id}
        onChange={(e) => dispatch(setId(e.target.value))}
      />
      <Input
        placeholder={intl.formatMessage({
          id: 'searchPanel.registrationId',
          defaultMessage: 'searchPanel.registrationId',
        })}
        prefix={<SearchOutlined />}
        size="small"
        value={accNo}
        onChange={(e) => dispatch(setAccNo(e.target.value))}
      />
      <TimeRangeSelector />
      <RangePicker
        className="w-full"
        placeholder={[
          intl.formatMessage({
            id: 'searchPanel.startDate',
            defaultMessage: 'searchPanel.startDate',
          }),
          intl.formatMessage({
            id: 'searchPanel.endDate',
            defaultMessage: 'searchPanel.endDate',
          }),
        ]}
        size="small"
        value={startTime && endTime ? [dayjs(startTime), dayjs(endTime)] : null}
        onChange={(dates) => {
          if (dates && dates[0] && dates[1]) {
            // 使用RFC3339Nano格式
            dispatch(
              setStartTime(dates[0].format('YYYY-MM-DDTHH:mm:ss.SSS[+08:00]'))
            );
            dispatch(
              setEndTime(dates[1].format('YYYY-MM-DDTHH:mm:ss.SSS[+08:00]'))
            );
          } else {
            dispatch(setStartTime(''));
            dispatch(setEndTime(''));
          }
        }}
      />
      <Button
        type="primary"
        icon={<SearchOutlined />}
        onClick={() => {
          dispatch(setPage(1));
          dispatch(setPageSize(10));

          // 通用的过滤条件
          const commonFilters = {
            patient_id: id,
            patient_name: name,
            access_number: accNo,
            start_time: startTime,
            end_time: endTime,
          };

          // 根据 currentKey 调用不同的 thunk
          if (currentKey === 'bin') {
            // 回收站搜索
            dispatch(
              fetchBinThunk({
                page: 1,
                pageSize: 10,
                filters: commonFilters as BinFilter,
              })
            );
          } else {
            // worklist/history 搜索
            const status =
              currentKey === 'worklist' ? 'Arrived,InProgress' : 'Completed';
            dispatch(
              fetchWorkThunk({
                page: 1,
                pageSize: 10,
                filters: {
                  ...commonFilters,
                  status: status,
                } as WorkFilter,
              })
            );
          }
        }}
      >
        <FormattedMessage
          id="searchPanel.search"
          defaultMessage="searchPanel.search"
        />
      </Button>
    </div>
  );
};

export default SearchPanel;