import React, { Component } from 'react';
import { createCategory } from '../../services/ApiCategory';

class CategoryFormClass extends Component {
  state = {
    name: '',
    description: ''
  };

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

  handleSubmit = async (event) => {
    event.preventDefault();
    const { name, description } = this.state;
    await createCategory({ name: name, description });
    this.setState({ name: '', description: '' });
    this.props.fetchCategories();
  };

  render() {
    const { name, description } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          type="text" 
          name="name"
          value={name} 
          onChange={this.handleChange} 
          placeholder="Category Name" 
        />
        <input 
          type="text" 
          name="description"
          value={description} 
          onChange={this.handleChange} 
          placeholder="Category Description" 
        />
        <button type="submit">Add Category</button>
      </form>
    );
  }
}

export default CategoryFormClass;
