import React, { useEffect, useState } from 'react';
import axios from 'axios';

const TaskBoard = () => {
    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        const fetchTasks = async () => {
            try {
                const response = await axios.get('http://127.0.0.1:8000/tasks/');
                setTasks(response.data);
            } catch (error) {
                console.error('Error fetching tasks:', error);
            }
        };

        fetchTasks();
    }, []);

    const [taskData, setTaskData] = useState({
        title: '',
        description: '',
        status: 'В ожидании', // По умолчанию
    });

    const handleTaskChange = (e) => {
        setTaskData({ ...taskData, [e.target.name]: e.target.value });
    };

    const handleTaskSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post('http://127.0.0.1:8000/tasks/', taskData);
            console.log('Task created:', response.data);
            // Обновите список задач после создания
        } catch (error) {
            console.error('Error creating task:', error);
        }
    };

    return (
        <div>
            <h1>Task Board</h1>
            <form onSubmit={handleTaskSubmit}>
                <input type="text" name="title" placeholder="Task Title" onChange={handleTaskChange} required />
                <textarea name="description" placeholder="Task Description" onChange={handleTaskChange} required />
                <button type="submit">Create Task</button>
            </form>
            <ul>
                {tasks.map(task => (
                       <li key={task.id}>
                           <h2>{task.title}</h2>
                           <p>{task.description}</p>
                           <p>Status: {task.status}</p>
                       </li>
                   ))}
               </ul>
           </div>
       );
   };

   export default TaskBoard;