import React, { useState } from 'react';
import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
import { Input, BottomSheet, ListItem, Text } from '@rneui/themed';
import { Task, RobotAction } from '../types/task';
import {
  LOCATIONS,
  ROBOT_ACTIONS,
  PAYLOADS,
  LOCATIONS_BAYS,
} from '../data/mockData';

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

const TaskForm: React.FC<TaskFormProps> = ({ task, onTaskChange }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [currentField, setCurrentField] = useState('');
  const [currentItems, setCurrentItems] = useState<
    { label: string; value: string }[]
  >([]);

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

  const openBottomSheet = (
    field: string,
    items: { label: string; value: string }[],
  ) => {
    setCurrentField(field);
    setCurrentItems(items);
    setIsVisible(true);
  };

  const renderDropdown = (
    name: string,
    label: string,
    value: string,
    items: { label: string; value: string }[],
  ) => (
    <TouchableOpacity onPress={() => openBottomSheet(name, items)}>
      <Input
        label={label}
        value={value}
        editable={false}
        rightIcon={{ name: 'arrow-drop-down' }}
      />
    </TouchableOpacity>
  );

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

      {renderDropdown(
        'startLocation',
        '起点',
        task.parameters.startLocation,
        LOCATIONS,
      )}
      {renderDropdown(
        'endLocation',
        '终点',
        task.parameters.endLocation,
        LOCATIONS,
      )}

      <Input
        label="途经点 (可选)"
        value={task.parameters.waypoint || ''}
        onChangeText={text => handleParamChange('waypoint', text)}
      />

      {renderDropdown(
        'robotAction',
        '机器人动作',
        task.parameters.robotAction,
        ROBOT_ACTIONS,
      )}
      {renderDropdown('payload', '载荷', task.parameters.payload, PAYLOADS)}
      {renderDropdown(
        'locationBay',
        '库位',
        task.parameters.locationBay,
        LOCATIONS_BAYS,
      )}

      <BottomSheet
        isVisible={isVisible}
        onBackdropPress={() => setIsVisible(false)}
      >
        <ScrollView>
          {currentItems.map((item, index) => (
            <ListItem
              key={index}
              onPress={() => {
                handleParamChange(currentField, item.value);
                setIsVisible(false);
              }}
            >
              <ListItem.Content>
                <ListItem.Title>{item.label}</ListItem.Title>
              </ListItem.Content>
            </ListItem>
          ))}
        </ScrollView>
      </BottomSheet>
    </ScrollView>
  );
};

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

export default TaskForm;