import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Input, Slider } from '@rneui/themed';
import { Task, RobotAction, InputParam } from '../types/task';

interface TaskFormProps {
  task: Task;
  onTaskChange: (updatedTask: Task) => void;
}

const TaskForm: React.FC<TaskFormProps> = ({ task, onTaskChange }) => {
  const handleParamChange = (
    field: string,
    value: string | number | RobotAction,
  ) => {
    const parameters = task.parameters || {};
    const currentParam = parameters[field] || {};
    const updatedTask = {
      ...task,
      parameters: {
        ...parameters,
        [field]: {
          ...currentParam,
          value: value,
        },
      },
    };
    onTaskChange(updatedTask);
  };

  const renderFormInput = (param: InputParam) => {
    const parameter = task.parameters?.[param.name];
    const value = parameter?.value ?? param.defaultValue;

    const label = (
      <Text style={styles.label}>
        {param.label}
        {param.required && <Text style={styles.required}> *</Text>}
      </Text>
    );

    switch (param.type.toLowerCase()) {
      case 'string':
        return (
          <View key={param.name} style={styles.inputGroup}>
            {label}
            <Input
              value={String(value || '')}
              onChangeText={text => handleParamChange(param.name, text)}
              placeholder={param.remark || '请输入...'}
              inputContainerStyle={styles.inputContainer}
              inputStyle={styles.inputText}
              placeholderTextColor="#888"
            />
          </View>
        );
      case 'number':
        return (
          <View key={param.name} style={styles.inputGroup}>
            {label}
            <Input
              value={String(value)}
              onChangeText={text =>
                handleParamChange(param.name, text.replace(/[^0-9]/g, ''))
              }
              placeholder={param.remark || '请输入数字...'}
              keyboardType="numeric"
              inputContainerStyle={styles.inputContainer}
              inputStyle={styles.inputText}
              placeholderTextColor="#888"
            />
          </View>
        );
      case 'slider':
        return (
          <View key={param.name} style={styles.inputGroup}>
            {label}
            <View style={styles.sliderContainer}>
              <Slider
                value={Number(value) || 0}
                onValueChange={val => handleParamChange(param.name, val)}
                minimumValue={param.min || 0}
                maximumValue={param.max || 100}
                step={param.step || 1}
                allowTouchTrack
                trackStyle={styles.sliderTrack}
                thumbStyle={styles.sliderThumb}
              />
              <Text style={styles.sliderValue}>{String(value)}</Text>
            </View>
          </View>
        );
      default:
        return null;
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputGroup}>
        <Text style={styles.label}>任务名称</Text>
        <Input
          value={task.label}
          onChangeText={text => onTaskChange({ ...task, name: text })}
          inputContainerStyle={styles.inputContainer}
          inputStyle={styles.inputText}
        />
      </View>

      {task.detail && task.detail.inputParams ? (
        task.detail.inputParams.map(param => renderFormInput(param))
      ) : (
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>正在加载任务参数...</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  inputGroup: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    color: '#AAAAAA',
    marginBottom: 8,
  },
  required: {
    color: '#ff4d4d',
  },
  inputContainer: {
    backgroundColor: '#333333',
    borderBottomWidth: 1,
    borderBottomColor: '#555555',
    paddingHorizontal: 10,
    borderRadius: 5,
  },
  inputText: {
    color: '#FFFFFF',
    fontSize: 16,
  },
  pickerContainer: {
    backgroundColor: '#FFFFFF',
    borderRadius: 5,
  },
  picker: {
    color: '#000000',
  },
  sliderContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  },
  sliderTrack: {
    height: 5,
    backgroundColor: '#555',
  },
  sliderThumb: {
    height: 20,
    width: 20,
    backgroundColor: '#00ff00',
  },
  sliderValue: {
    marginLeft: 16,
    color: '#FFFFFF',
    fontSize: 16,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  loadingText: {
    color: '#AAAAAA',
    fontSize: 16,
  },
});

export default TaskForm;
