import React, { useState } from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { TextInput } from 'react-native-paper';
import DropDown from "react-native-paper-dropdown";
import { Task, RobotAction } from '../types/task';
import { LOCATIONS, ROBOT_ACTIONS, PAYLOADS } from '../data/mockData';

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

const TaskForm: React.FC<TaskFormProps> = ({ task, onTaskChange }) => {
    const [showStartLocation, setShowStartLocation] = useState(false);
    const [showEndLocation, setShowEndLocation] = useState(false);
    const [showRobotAction, setShowRobotAction] = useState(false);
    const [showPayload, setShowPayload] = useState(false);

  const handleParamChange = (field: string, value: string | RobotAction) => {
    const updatedTask = {
      ...task,
      parameters: {
        ...task.parameters,
        [field]: value,
      },
    };
    onTaskChange(updatedTask);
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
        <TextInput
            label="任务名称"
            value={task.name}
            onChangeText={text => onTaskChange({ ...task, name: text })}
            style={styles.input}
            mode="outlined"
        />

        {/* <DropDown
            label={"起点"}
            mode={"outlined"}
            visible={showStartLocation}
            showDropDown={() => setShowStartLocation(true)}
            onDismiss={() => setShowStartLocation(false)}
            value={task.parameters.startLocation}
            setValue={(value) => handleParamChange('startLocation', value)}
            list={LOCATIONS.map((location) => ({
                label: location.label,
                value: location.value,
            }))}
            dropDownStyle={styles.input}
        /> */}
        <TextInput
            label="起点"
            value={task.parameters.startLocation}
            onChangeText={text => handleParamChange('startLocation', text)}
            style={styles.input}
            mode="outlined"
        />

        {/* <DropDown
            label={"终点"}
            mode={"outlined"}
            visible={showEndLocation}
            showDropDown={() => setShowEndLocation(true)}
            onDismiss={() => setShowEndLocation(false)}
            value={task.parameters.endLocation}
            setValue={(value) => handleParamChange('endLocation', value)}
            list={LOCATIONS.map((location) => ({
                label: location.label,
                value: location.value,
            }))}
            dropDownStyle={styles.input}
        /> */}
        <TextInput
            label="终点"
            value={task.parameters.endLocation}
            onChangeText={text => handleParamChange('endLocation', text)}
            style={styles.input}
            mode="outlined"
        />
        
        <TextInput
            label="途经点 (可选)"
            value={task.parameters.waypoint || ''}
            onChangeText={text => handleParamChange('waypoint', text)}
            style={styles.input}
            mode="outlined"
        />
        
        {/* <DropDown
            label={"机器人动作"}
            mode={"outlined"}
            visible={showRobotAction}
            showDropDown={() => setShowRobotAction(true)}
            onDismiss={() => setShowRobotAction(false)}
            value={task.parameters.robotAction}
            setValue={(value) => handleParamChange('robotAction', value)}
            list={ROBOT_ACTIONS.map((action) => ({
                label: action.label,
                value: action.value,
            }))}
            dropDownStyle={styles.input}
        /> */}
        <TextInput
            label="机器人动作"
            value={task.parameters.robotAction}
            onChangeText={text => handleParamChange('robotAction', text)}
            style={styles.input}
            mode="outlined"
        />

        {/* <DropDown
            label={"载荷"}
            mode={"outlined"}
            visible={showPayload}
            showDropDown={() => setShowPayload(true)}
            onDismiss={() => setShowPayload(false)}
            value={task.parameters.payload}
            setValue={(value) => handleParamChange('payload', value)}
            list={PAYLOADS.map((payload) => ({
                label: payload.label,
                value: payload.value,
            }))}
            dropDownStyle={styles.input}
        /> */}
        <TextInput
            label="载荷"
            value={task.parameters.payload}
            onChangeText={text => handleParamChange('payload', text)}
            style={styles.input}
            mode="outlined"
        />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  input: {
    marginBottom: 16,
  },
});

export default TaskForm;