import React, { Component } from 'react';
import ProductForm from './ProductForm';
import { deleteProduct, updateProduct, getProduct } from '../../services/ApiProduct';
import './Product.css';

class ProductList extends Component {
  state = {
    products: [],
    isEditing: false,
    currentProduct: { id: '', name: '', description: '' },
  };

  componentDidMount() {
    this.fetchProducts();
  }

  fetchProducts = async () => {
    const products = await getProduct();
    this.setState({ products });
  };

  handleDelete = async (id) => {
    await deleteProduct(id);
    this.fetchProducts();
  };

  handleEdit = (product) => {
    this.setState({ isEditing: true, currentProduct: product });
  };

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

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

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

  render() {
    const { products, isEditing, currentProduct } = this.state;
    return (
      <div>
        <h2>Products</h2>
        {isEditing ? (
          <form onSubmit={this.handleUpdate}>
            <input
              type="text"
              name="name"
              value={currentProduct.name}
              onChange={this.handleChange}
              placeholder="Product Name"
            />
            <input
              type="text"
              name="description"
              value={currentProduct.description}
              onChange={this.handleChange}
              placeholder="Product Description"
            />
            <button type="submit" className="button button-update">Update</button>
            <button type="button" className="button button-delete" onClick={this.handleCancelEdit}>Cancel</button>
          </form>
        ) : (
          <ProductForm fetchProducts={this.fetchProducts} />
        )}
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Category</th>
              <th>Name</th>
              <th>Description</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {products.map(product => (
              <tr key={product.id}>
                <td>{product.id}</td>
                <td>{product.category}</td>
                <td>{product.name}</td>
                <td>{product.description}</td>
                <td>
                  <button className="button button-update" onClick={() => this.handleEdit(product)}>Edit</button>
                  <button className="button button-delete" onClick={() => this.handleDelete(product.id)}>Delete</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default ProductList;
