import React from 'react';
import { Field } from 'redux-form';

// 自定义输入组件
const CustomInput = ({ input, meta, label, ...rest }) => {
  const { touched, error } = meta;
  return (
    <div>
      <label>{label}</label>
      <input {...input} {...rest} />
      {touched && error && <span className="error">{error}</span>}
    </div>
  );
};

// 在表单中使用
const MyForm = () => (
  <form>
    <Field
      name="username"
      component={CustomInput}
      label="用户名"
      type="text"
    />
  </form>
);

const TextField = ({ input, meta: { touched, error }, ...props }) => (
  <div>
    <input {...input} {...props} />
    {touched && error && <div>{error}</div>}
  </div>
);

const DatePickerField = ({ input, meta: { touched, error }, ...props }) => {
  const handleChange = (date) => {
    input.onChange(date.toISOString());
  };

  return (
    <div>
      <DatePicker
        selected={input.value ? new Date(input.value) : null}
        onChange={handleChange}
        {...props}
      />
      {touched && error && <div>{error}</div>}
    </div>
  );
};

const SelectField = ({ input, options, meta: { touched, error }, ...props }) => (
  <div>
    <select {...input} {...props}>
      {options.map(option => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
    {touched && error && <div>{error}</div>}
  </div>
);

// 确保正确处理input.value
const CustomInput = ({ input, ...props }) => (
  <input value={input.value || ''} onChange={input.onChange} {...props} />
);

const CustomInput = ({ input, meta: { touched, error }, ...props }) => (
  <div>
    <input {...input} {...props} />
    {touched && error && <div className="error">{error}</div>}
  </div>
);

const MemoizedInput = React.memo(CustomInput);

// 使用
<Field name="username" component={MemoizedInput} />

const CurrencyInput = ({ input, meta, ...props }) => {
  const handleChange = (e) => {
    const value = e.target.value.replace(/\D/g, '');
    input.onChange(value ? parseInt(value, 10) : '');
  };

  return (
    <input
      value={input.value ? `$${input.value}` : ''}
      onChange={handleChange}
      {...props}
    />
  );
};

// 或者使用Field的format和parse属性
<Field
  name="price"
  component="input"
  type="text"
  format={value => (value ? `$${value}` : '')}
  parse={value => value.replace(/\D/g, '')}
/>

const CustomInput = React.forwardRef(({ input, meta, ...props }, ref) => (
  <input {...input} {...props} ref={ref} />
));