import React, { Component } from 'react';
import CategoryFormClass from './CategoryFormClass';
import { getCategories, deleteCategory, updateCategory } from '../../services/ApiCategory';
import './Category.css';

class CategoryListClass extends Component {
  state = {
    categories: [],
    isEditing: false,
    currentCategory: { id: '', name: '', description: '' },
  };

  componentDidMount() {
    this.fetchCategories();
  }

  fetchCategories = async () => {
    const categories = await getCategories();
    this.setState({ categories });
  };

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

  handleEdit = (category) => {
    this.setState({ isEditing: true, currentCategory: category });
  };

  handleCancelEdit = () => {
    this.setState({ isEditing: false, currentCategory: { id: '', name: '', description: '' } });
  };

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState((prevState) => ({
      currentCategory: { ...prevState.currentCategory, [name]: value }
    }));
  };

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

  render() {
    const { categories, isEditing, currentCategory } = this.state;
    return (
      <div>
        <h2>Categories</h2>
        {isEditing ? (
          <form onSubmit={this.handleUpdate}>
            <input
              type="text"
              name="name"
              value={currentCategory.name}
              onChange={this.handleChange}
              placeholder="Category Name"
            />
            <input
              type="text"
              name="description"
              value={currentCategory.description}
              onChange={this.handleChange}
              placeholder="Category Description"
            />
            <button type="submit" className="button button-update">Update</button>
            <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
          </form>
        ) : (
          <CategoryFormClass fetchCategories={this.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={() => this.handleEdit(category)}>Edit</button>
                  <button className="button button-delete" onClick={() => this.handleDelete(category.id)}>Delete</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default CategoryListClass;
