text: import React, { useEffect, useState } from "react";
  import { useDispatch, useSelector } from "react-redux";
  import { Link } from "react-router-dom";
  import { toast } from "react-toastify";
  import Toast from "../../../util/toast.js";
  import { PRODUCT_CREATE_RESET } from "../../../constants/product_constants.js";
  import { createProduct } from "../../../redux/actions/product_actions.js";
  import Loading from "../../../util/loading";
  import Message from "../../../util/message";
  
  const AddProduct = () => {
  
      const [name, setName] = useState("");
      const [price, setPrice] = useState(0);
      const [countInStock, setCountInStock] = useState(0);
      const [description, setDescription] = useState("");
      const [image, setImage] = useState("");
  
      const ToastObjects = {
          pauseOnFocusLoss: false,
          draggable: false,
          pauseOnHover: false,
          autoClose: 2000,
      };
  
      const dispatch = useDispatch();
  
      const productCreate = useSelector((state) => state.productCreate);
      const { loading, error, product } = productCreate;
  
      useEffect(() => {
          if (product) {
              toast.success("Product Added", ToastObjects);
              dispatch({ type: PRODUCT_CREATE_RESET });
              setName("");
              setDescription("");
              setCountInStock(0);
              setImage("");
              setPrice(0);
          }
      }, [product, dispatch]);
  
      const submitHandler = (e) => {
          e.preventDefault();
          dispatch(createProduct(name, price, description, image, countInStock));
      }
  
      return (
          <>
              <Toast />
              <section className="content-main" style={{ maxWidth: "1200px" }}>
                  <form onSubmit={submitHandler}>
                      <div className="content-header">
                          <Link to="/products" className="btn btn-danger text-white">
                              Go to products
                          </Link>
                          <h2 className="content-title">Add product</h2>
                          <div>
                              <button type="submit" className="btn btn-primary">
                                  Publish now
                              </button>
                          </div>
                      </div>
                      <div className="row mb-4">
                          <div className="col-xl-8 col-lg-8">
                              <div className="card mb-4 shadow-sm">
                                  <div className="card-body">
                                      {error && <Message variant="alert-danger">{error}</Message>}
                                      {loading && <Loading />}
                                      <div className="mb-4">
                                          <label htmlFor="product_title" className="form-label">
                                              Product title
                                          </label>
                                          <input
                                              type="text"
                                              placeholder="Type here"
                                              className="form-control"
                                              id="product_title"
                                              required
                                              value={name}
                                              onChange={(e) => setName(e.target.value)}
                                          />
                                      </div>
                                      <div className="mb-4">
                                          <label htmlFor="product_price" className="form-label">
                                              Price
                                          </label>
                                          <input
                                              type="number"
                                              placeholder="Type here"
                                              className="form-control"
                                              id="product_price"
                                              required
                                              value={price}
                                              onChange={(e) => setPrice(e.target.value)}
                                          />
                                      </div>
                                      <div className="mb-4">
                                          <label htmlFor="product_count_in_stock" className="form-label">
                                              Count In Stock
                                          </label>
                                          <input
                                              type="number"
                                              placeholder="Type here"
                                              className="form-control"
                                              id="product_count_in_stock"
                                              required
                                              value={countInStock}
                                              onChange={(e) => setCountInStock(e.target.value)}
                                          />
                                      </div>
                                      <div className="mb-4">
                                          <label htmlFor="product_description" className="form-label">
                                              Description
                                          </label>
                                          <input
                                              placeholder="Type here"
                                              className="form-control"
                                              rows="7"
                                              id="product_description"
                                              required
                                              value={description}
                                              onChange={(e) => setDescription(e.target.value)}
                                          />
                                      </div>
                                      <div className="mb-4">
                                          <label htmlFor="product_image" className="form-label">
                                              Image
                                          </label>
                                          <input
                                              type="text"
                                              placeholder="Enter Image URL"
                                              className="form-control"
                                              id="product_image"
                                              required
                                              value={image}
                                              onChange={(e) => setImage(e.target.value)}
                                          />
                                          <input className="form-control mt-3" type="file" />
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </form>
              </section>
          </>
      );
  }
  
  export default AddProduct;