import React from 'react';
import { Form, Button } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';

const RedemptionsFilters = ({
  formInitValues,
  setFormApi,
  searchRedemptions,
  loading,
  searching,
  t
}) => {

  // Handle form reset and immediate search
  const handleReset = (formApi) => {
    if (formApi) {
      formApi.reset();
      // Reset and search immediately
      setTimeout(() => {
        searchRedemptions();
      }, 100);
    }
  };

  return (
    <Form
      initValues={formInitValues}
      getFormApi={(api) => setFormApi(api)}
      onSubmit={searchRedemptions}
      allowEmpty={true}
      autoComplete="off"
      layout="horizontal"
      trigger="change"
      stopValidateWithError={false}
      className="w-full md:w-auto order-1 md:order-2"
    >
      <div className="flex flex-col md:flex-row items-center gap-2 w-full md:w-auto">
        <div className="relative w-full md:w-64">
          <Form.Input
            field="searchKeyword"
            prefix={<IconSearch />}
            placeholder={t('关键字(id或者名称)')}
            showClear
            pure
            size="small"
          />
        </div>
        <div className="flex gap-2 w-full md:w-auto">
          <Button
            type="tertiary"
            htmlType="submit"
            loading={loading || searching}
            className="flex-1 md:flex-initial md:w-auto"
            size="small"
          >
            {t('查询')}
          </Button>
          <Button
            type="tertiary"
            onClick={(_, formApi) => handleReset(formApi)}
            className="flex-1 md:flex-initial md:w-auto"
            size="small"
          >
            {t('重置')}
          </Button>
        </div>
      </div>
    </Form>
  );
};

export default RedemptionsFilters; 