import React, { useState, useEffect } from "react";
import Cookies from "js-cookie";
import toast, { Toaster } from "react-hot-toast";
import SingleImageBox from "@/components/SingleImageBox";
import apiInterceptor from "@/interceptor/interceptor";
import { useRouter } from "next/router";
import ImageBox from "@/components/ImageBox";

interface ProductData {
  categoryId: string;
  subCategoryId: string;
  brandId: string;
  productTitle: string;
  productFeaturedImage: string;
  productDescription: string;
  productShortDescription: string;
  productType: string;
  productOriginalPrice: string;
  productDiscountPrice: string;
  productDiscountPercentage: string;
  productSellingPrice: string;
  productAge: string;
  productGallery: string[];
}

const UpdateProduct = () => {
  const router = useRouter();
  const { id } = router.query;

  const [imageUrl, setImageUrl] = useState<string>("");
  const [pData, setPData] = useState<any>({});
  const [categories, setCategories] = useState<any[]>([]);

  const [subCategories, setSubCategories] = useState<any[]>([]);

  const [brands, setBrands] = useState<any[]>([]);

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

  const [uploadedImageLinks, setUploadedImageLinks] = useState<{
    [key: number]: string;
  }>({});

  const handleImageUpload = (id: number, imageUrl: string) => {
    setUploadedImageLinks((prevLinks) => ({
      ...prevLinks,
      [id]: imageUrl,
    }));
  };

  const [formData, setFormData] = useState<ProductData>({
    categoryId: "",
    subCategoryId: "",
    brandId: "",
    productTitle: "",
    productFeaturedImage: "",
    productDescription: "",
    productShortDescription: "",
    productType: "",
    productOriginalPrice: "",
    productDiscountPrice: "",
    productDiscountPercentage: "",
    productSellingPrice: "",
    productAge: "",
    productGallery: [],
  });
  const successNotify = () => toast.success("Updated Successfully !");
  const errorNotify = () => toast.error("Something went wrong !");

  // Handle input and textarea changes
  const handleChange = async (
    event: React.ChangeEvent<
      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
    >
  ) => {
    const { id, value } = event.target;
    setFormData((prevFormData) => ({
      ...prevFormData,
      productFeaturedImage: imageUrl ? imageUrl : pData.productFeaturedImage,
      productGallery: uploadedImageLinks ? Object.values(uploadedImageLinks) : pData.galleries,
      [id]: value,
    }));

    if (id === "categoryId") {
      const subcategoriesResponse = await apiInterceptor.get(
        `/api/getSubCategories/${value}`
      );

      setSubCategories(subcategoriesResponse.data.subCategories);
    }
    console.log("f-data-after edit", formData)
  };

  useEffect(() => {
    const getAllDropdowns = async () => {
      const categoryResponse = await apiInterceptor.get(`/api/getCategories`);

      setCategories(categoryResponse.data.categories);

      const brandResponse = await apiInterceptor.get(`/api/getBrands`);
      setBrands(brandResponse.data.brands);
    };
    getAllDropdowns();
  }, []);

  useEffect(() => {
    const getProductData = async () => {
      try {
        const accessToken = Cookies.get("jazz_token");
        const productDataResponse = await apiInterceptor.get(
          `/api/admin/products/${id}/edit?per_page=500`,
          {
            headers: { authorization: `Bearer ${accessToken}` },
          }
        );

        const productData = productDataResponse?.data?.product;
        //console.log("get response dataa", productData);
        setPData(productData)
        setFormData({
          categoryId: productData?.categoryId,
          subCategoryId: productData?.subCategoryId,
          brandId: productData?.brandId,
          productTitle: productData?.productTitle,
          productFeaturedImage: productData?.productFeaturedImage,
          productDescription: productData?.productDescription,
          productShortDescription: productData?.productShortDescription,
          productType: productData?.productType,
          productOriginalPrice: productData?.productOriginalPrice,
          productDiscountPrice: productData?.productDiscountPrice,
          productDiscountPercentage: productData?.productDiscountPercentage,
          productSellingPrice: productData?.productSellingPrice,
          productAge: productData?.productAge,
          productGallery: productData?.productGallery,
        });
        console.log("Form data in before edit", formData)
      } catch (error) {
        console.error("Error", error);
      }
    };
    getProductData();
  }, [id]);

  const handleSubmit = async (event: React.FormEvent) => {
    //event.preventDefault();
    try {

      const accessToken = Cookies.get("jazz_token");
      console.log(accessToken);
      const response = await apiInterceptor.put(
        `/api/admin/products/${id}`,
        formData,
        {
          headers: {
            authorization: `Bearer ${accessToken}`,
          },
        }
      );
      console.log(response);
      if (response) successNotify();
    } catch (error: any) {
       errorNotify();
      //  console.log("error",error)
     // toast.error("error", error)
    }

  };

  return (
    console.log("Form data in jsx", pData),
    <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-[#FF332B] ">
          Update Product
        </h2>
        <Toaster
          toastOptions={{
            className: "",
            duration: 5000,
            style: {
              marginTop: "3rem",
              background: "#FE342B",
              color: "#fff",
            },
          }}
        />
        <form action="#" className="space-y-8" onSubmit={handleSubmit}>
          <div className="grid lg:grid-cols-2">
            <div className="space-y-8">
              <div>
                <label
                  htmlFor="brandId"
                  className="block mb-2 text-sm font-medium text-[#FF332B] "
                >
                  Brand
                </label>
                <select
                  id="brandId"
                  required
                  className="shadow-sm bg-gray-50 border border-gray-300 text-[#FF332B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
                  onChange={handleChange}
                  value={formData.brandId}
                >
                  <option disabled selected>
                    Select Brand
                  </option>
                  {brands.map((item) => {
                    return (
                      <option value={item._id} key={item._id}>
                        {item.brandName}
                      </option>
                    );
                  })}
                </select>
              </div>

              <div>
                <label
                  htmlFor="categoryId"
                  className="block mb-2 text-sm font-medium text-[#FF332B] "
                >
                  Category
                </label>
                <select
                  value={formData.categoryId}
                  id="categoryId"
                  required
                  className="shadow-sm bg-gray-50 border border-gray-300 text-[#FF332B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
                  onChange={handleChange}
                >
                  <option disabled selected>
                    Select Category
                  </option>
                  {categories.map((item) => {
                    return (
                      <option value={item._id} key={item._id}>
                        {item.categoryName}
                      </option>
                    );
                  })}
                </select>
              </div>

              <div>
                <label
                  htmlFor="subCategoryId"
                  className="block mb-2 text-sm font-medium text-[#FF332B] "
                >
                  Sub Category
                </label>
                <select
                  id="subCategoryId"
                  name="subCategoryId"
                  required
                  className="shadow-sm bg-gray-50 border border-gray-300 text-[#FF332B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
                  onChange={handleChange}
                  value={formData.subCategoryId}
                >
                  <option disabled selected>
                    Select Sub Category
                  </option>
                  {subCategories.map((item) => {
                    return (
                      <option value={item._id} key={item._id}>
                        {item.subCategoryName}
                      </option>
                    );
                  })}
                </select>
              </div>
            </div>

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

          <div className="grid lg:grid-cols-2">
            <div className="mr-1 my-2">
              <label
                htmlFor="productTitle"
                className="block mb-2 text-sm font-medium text-[#FF332B] "
              >
                Product
              </label>
              <input
                value={formData.productTitle}
                type="text"
                id="productTitle"
                className="shadow-sm bg-gray-50 border border-gray-300 text-[#FF332B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
                required
                onChange={handleChange}
              />
            </div>

            <div className="ml-1 my-2">
              <label
                htmlFor="productType"
                className="block mb-2 text-sm font-medium text-[#FF332B] "
              >
                Product Type
              </label>
              <select
                id="productType"
                required
                className="shadow-sm bg-gray-50 border border-gray-300 text-[#FF332B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 "
                onChange={handleChange}
                value={formData.productType}
              >
                <option disabled selected>
                  Select type
                </option>
                <option value="simple">Simple</option>
                <option value="variable">Variable</option>
              </select>
            </div>

            <div className="mr-1 my-2">
              <label
                htmlFor="productOriginalPrice"
                className="block mb-2 text-sm font-medium text-[#FF332B] "
              >
                Product Original Price
              </label>
              <input
                type="text"
                id="productOriginalPrice"
                className="block p-2.5 w-full text-sm text-[#FF332B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
                required
                value={formData.productOriginalPrice}
                onChange={handleChange}
              />
            </div>

            <div className="ml-1 my-2">
              <label
                htmlFor="productDiscountPrice"
                className="block mb-2 text-sm font-medium text-[#FF332B] "
              >
                Product Discount Price
              </label>
              <input
                value={formData.productDiscountPrice}
                type="text"
                id="productDiscountPrice"
                className="block p-2.5 w-full text-sm text-[#FF332B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
                required
                onChange={handleChange}
              />
            </div>

            <div className="mr-1 my-2">
              <label
                htmlFor="productDiscountPercentage"
                className="block mb-2 text-sm font-medium text-[#FF332B] "
              >
                Product Discount Pecentage
              </label>
              <input
                type="text"
                id="productDiscountPercentage"
                className="block p-2.5 w-full text-sm text-[#FF332B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
                required
                value={formData.productDiscountPercentage}
                onChange={handleChange}
              />
            </div>

            <div className="ml-1 my-2">
              <label
                htmlFor="productSellingPrice"
                className="block mb-2 text-sm font-medium text-[#FF332B] "
              >
                Product Selling Price
              </label>
              <input
                type="text"
                id="productSellingPrice"
                className="block p-2.5 w-full text-sm text-[#FF332B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
                required
                value={formData.productSellingPrice}
                onChange={handleChange}
              />
            </div>
          </div>
          <div className="ml-1 my-2">
            <label
              htmlFor="productAge"
              className="block mb-2 text-sm font-medium text-[#FF332B] "
            >
              Product Age
            </label>
            <input
              type="text"
              id="productAge"
              className="block p-2.5 w-full text-sm text-[#FF332B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
              required
              value={formData.productAge}
              onChange={handleChange}
            />
          </div>
          <div className="sm:col-span-2">
            <label
              htmlFor="productShortDescription"
              className="block mb-2 text-sm font-medium text-[#FF332B] "
            >
              Short Description
            </label>
            <textarea
              id="productShortDescription"
              rows={2}
              className="block p-2.5 w-full text-sm text-[#FF332B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
              placeholder="Short description here..."
              value={formData.productShortDescription}
              onChange={handleChange}
            ></textarea>
          </div>
          <div className="sm:col-span-2">
            <label
              htmlFor="productDescription"
              className="block mb-2 text-sm font-medium text-[#FF332B] "
            >
              Long Description
            </label>
            <textarea
              id="productDescription"
              rows={6}
              className="block p-2.5 w-full text-sm text-[#FF332B] bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 "
              placeholder="Add description here..."
              value={formData.productDescription}
              onChange={handleChange}
            ></textarea>
          </div>

          <div className="">
            <h2 className="font-bold">UPLOAD PHOTOS *</h2>
            <p className="my-3">Minimum 3 photos should be selected</p>
            <div className="flex flex-wrap">
              <div className="mr-4 mb-4">
                <ImageBox id={1} onImageUpload={handleImageUpload} />
              </div>
              <div className="mr-4 mb-4">
                <ImageBox id={2} onImageUpload={handleImageUpload} />
              </div>
              <div className="mr-4 mb-4">
                <ImageBox id={3} onImageUpload={handleImageUpload} />
              </div>
              <div className="mr-4 mb-4">
                <ImageBox id={4} onImageUpload={handleImageUpload} />
              </div>
              <div className="mr-4 mb-4">
                <ImageBox id={5} onImageUpload={handleImageUpload} />
              </div>
            </div>
          </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-[#FF332B] hover:text-white transition-all duration-300"
          >
            Submit
          </button>
        </form>
      </div>
    </section>
  );
};

export default UpdateProduct;