import React from 'react';
import {
  Box,
  Typography,
  TextField,
  IconButton,
} from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
import { Controller, useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

export interface NumberInputFormFieldProps {
  name: string;
  label: string;
  helperText?: string;
  defaultValue?: number;
  disabled?: boolean;
  required?: boolean;
  fullWidth?: boolean;
  min?: number;
  max?: number;
  step?: number;
  placeholder?: string;
  size?: 'small' | 'medium';
  showRandomButton?: boolean;
  onRandomClick?: () => void;
}

export const NumberInputFormField: React.FC<NumberInputFormFieldProps> = ({
  name,
  label,
  helperText,
  defaultValue = 0,
  disabled = false,
  required = false,
  fullWidth = true,
  min,
  max,
  step,
  placeholder,
  size = 'medium',
  showRandomButton = false,
  onRandomClick,
}) => {
  const { control } = useFormContext();
  const { t } = useTranslation();

  const handleRandomClick = () => {
    if (onRandomClick) {
      onRandomClick();
    } else if (min !== undefined && max !== undefined) {
      const randomValue = Math.floor(Math.random() * (max - min + 1)) + min;
      // 这里需要通过setValue来更新表单值，但为了保持组件的纯净性，
      // 建议通过onRandomClick回调来处理
    }
  };

  return (
    <Box>
      <Typography variant="subtitle1" gutterBottom>
        {required && <span style={{ color: 'red' }}>*</span>}
        {label}
      </Typography>
      <Controller
        name={name}
        control={control}
        defaultValue={defaultValue}
        rules={{
          required: required ? t('form.fieldRequired', { field: label }) : false,
          min: min !== undefined ? {
            value: min,
            message: t('form.minValueExceeded', { field: label, min })
          } : undefined,
          max: max !== undefined ? {
            value: max,
            message: t('form.maxValueExceeded', { field: label, max })
          } : undefined,
        }}
        render={({ field, fieldState: { error } }) => (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <TextField
              {...field}
              type="number"
              fullWidth={fullWidth}
              disabled={disabled}
              placeholder={placeholder}
              size={size}
              error={!!error}
              helperText={error?.message || helperText}
              inputProps={{
                min,
                max,
                step,
              }}
              onChange={(e) => {
                const value = e.target.value === '' ? '' : Number(e.target.value);
                field.onChange(value);
              }}
            />
            {showRandomButton && (
              <IconButton
                onClick={handleRandomClick}
                disabled={disabled}
                size={size}
              >
                <AddIcon />
              </IconButton>
            )}
          </Box>
        )}
      />
    </Box>
  );
};