import React, { useState, ChangeEvent, FormEvent ,useEffect} from "react";
import axios from "axios";
import Cookies from "js-cookie";
import SingleImageBox from "@/components/SingleImageBox";

interface FormData {
  categoryName: string;
  shortDescription: string;
  longDescription: string;
  categoryImage:string;
}

const Category: React.FC = () => {

  const [imageUrl, setImageUrl] = useState<string>('');

  const handleStateChange = (state:string) => {
    setImageUrl(state);
    console.log(state)
  };

  const [formData, setFormData] = useState<FormData>({
    categoryName: "",
    shortDescription: "",
    longDescription: "",
    categoryImage:""
  });

  useEffect(()=>{
    setFormData((prevData) => ({
      ...prevData,
      categoryImage: imageUrl,
    }));
  },[imageUrl])

  const handleChange = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      categoryImage: imageUrl,
      [name]: value,
    }));
  };


  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    try {
      const accessToken = Cookies.get("jazz_token");
      const response = await axios.post("https://api.jazzagain.com/public/index.php/api/admin/category", formData, {
        headers: {
          authorization: `Bearer ${accessToken}`,
        },
      });
      console.log("Response:", response.data);
    } catch (error) {
      console.error("Error:", error);
    }
  };

  return (
    <section className="bg-white ">
      <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
        <h2 className="mb-4 text-3xl sm:text-4xl tracking-tight font-extrabold text-center text-[#FE342B] ">
          Add Category
        </h2>

        <form action="#" className="space-y-8" onSubmit={handleSubmit}>
          <div className="grid lg:grid-cols-2">
            <div className="space-y-8">
              <div>
                <label
                  htmlFor="categoryName"
                  className="block mb-2 text-sm font-medium text-[#FE342B] "
                >
                  Category Name
                </label>
                <input
                  type="text"
                  id="categoryName"
                  name="categoryName"
                  value={formData.categoryName}
                  onChange={handleChange}
                  className="shadow-sm bg-gray-50 border border-gray-300 text-[#FE342B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
                  placeholder="i.e Women"
                  required
                />
              </div>
            </div>

            <div className="flex items-center justify-center w-full mt-4">
              <SingleImageBox onStateChange={handleStateChange}/>
            </div>
          </div>

          <div className="sm:col-span-2">
            <label
              htmlFor="shortDescription"
              className="block mb-2 text-sm font-medium text-[#FE342B] "
            >
              Short Description
            </label>
            <textarea
              id="shortDescription"
              name="shortDescription"
              value={formData.shortDescription}
              onChange={handleChange}
              rows={2}
              className="block p-2.5 w-full text-sm text-[#FE342B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
              placeholder="Short description here..."
            ></textarea>
          </div>
          <div className="sm:col-span-2">
            <label
              htmlFor="longDescription"
              className="block mb-2 text-sm font-medium text-[#FE342B] "
            >
              Long Description
            </label>
            <textarea
              id="longDescription"
              name="longDescription"
              value={formData.longDescription}
              onChange={handleChange}
              rows={6}
              className="block p-2.5 w-full text-sm text-[#FE342B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
              placeholder="Add description here..."
            ></textarea>
          </div>
          <button
            type="submit"
            className="py-3 px-5 text-sm font-medium text-center rounded-lg bg-gray-300 sm:w-fit hover:bg-[#FE342B] hover:text-white transition-all duration-300"
          >
            Submit
          </button>
        </form>
      </div>
    </section>
  );
};

export default Category;