// CategoryListFunction.js
import React, { useEffect, useState } from 'react';
import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
import './Category.css';
import CategoryFormFunction from './CategoryFormFunction';

const CategoryListFunction = () => {
  const [categories, setCategories] = useState([]);
  const [isEditing, setIsEditing] = useState(false);
  const [currentCategory, setCurrentCategory] = useState({ id: '', name: '', description: '' });

  useEffect(() => {
    fetchCategories();
  }, []);

  const fetchCategories = async () => {
    const categories = await getCategories();
    setCategories(categories);
  };

  const handleDelete = async (id) => {
    await deleteCategory(id);
    fetchCategories();
  };

  const handleEdit = (category) => {
    setIsEditing(true);
    setCurrentCategory(category);
  };

  const handleCancelEdit = () => {
    setIsEditing(false);
    setCurrentCategory({ id: '', name: '', description: '' });
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setCurrentCategory((prevCategory) => ({
      ...prevCategory,
      [name]: value,
    }));
  };

  const handleUpdate = async (event) => {
    event.preventDefault();
    await updateCategory(currentCategory.id, {
      name: currentCategory.name,
      description: currentCategory.description,
    });
    setIsEditing(false);
    setCurrentCategory({ id: '', name: '', description: '' });
    fetchCategories();
  };

  return (
    <div>
      <h2>Categories</h2>
      {isEditing ? (
        <form onSubmit={handleUpdate}>
          <input
            type="text"
            name="name"
            value={currentCategory.name}
            onChange={handleChange}
            placeholder="Category Name"
          />
          <input
            type="text"
            name="description"
            value={currentCategory.description}
            onChange={handleChange}
            placeholder="Category Description"
          />
          <button type="submit" className="button button-update">
            Update
          </button>
          <button type="button" className="button button-delete" onClick={handleCancelEdit}>
            Cancel
          </button>
        </form>
      ) : (
        <CategoryFormFunction fetchCategories={fetchCategories} />
      )}
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {categories.map((category) => (
            <tr key={category.id}>
              <td>{category.id}</td>
              <td>{category.name}</td>
              <td>{category.description}</td>
              <td>
                <button className="button button-update" onClick={() => handleEdit(category)}>
                  Edit
                </button>
                <button className="button button-delete" onClick={() => handleDelete(category.id)}>
                  Delete
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default CategoryListFunction;
