import React from "react";
import {
  TaskDefinition,
  TaskMetadata,
} from "../services/WorkflowTemplateService";
import AddTaskButton from "./AddTaskButton";
import { Namespaces } from "../../../../i18n/i18n";
import { useTranslation } from "react-i18next";

interface TaskListProps {
  tasks: TaskDefinition[];
  taskType: string;
  onChange: (tasks: TaskDefinition[]) => void;
}

const TaskList: React.FC<TaskListProps> = ({ tasks, taskType, onChange }) => {
  const { t: tTaskType } = useTranslation(Namespaces.TaskTypes);

  const handleAddTask = (selectedType: TaskMetadata) => {
    const newTask: TaskDefinition = {
      type: selectedType.taskType,

      config: { name: tTaskType(selectedType.displayName) },
    };

    console.log("Add Task clicked");
    onChange([...tasks, newTask]);
  };

  return (
    <div>
      <AddTaskButton taskType={taskType} onAdd={handleAddTask} />

      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task.type}</li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;