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

interface FormData {
  attributeId:string;
  variationName: string;
}

const successNotify = () => toast.success("Updated Successfully !");
const errorNotify = () => toast.error("Something went wrong !");

const UpdateVariations: React.FC = () => {
  const router = useRouter();
  const id = router.query.id;

  const [formData, setFormData] = useState<FormData>({
    attributeId:"",
    variationName: "",
  });

  useEffect(() => {
    const getVariationsData = async () => {
      try {
        const accessToken = Cookies.get("jazz_token");
        const response = await apiInterceptor.get(
          `/api/admin/variations/${id}/edit`,
          {
            headers: {
              authorization: `Bearer ${accessToken}`,
            },
          }
        );
        const variationsData = response.data.variation;

        if (variationsData) {
          setFormData({
            attributeId:variationsData.attributeId,
            variationName: variationsData.variationName
          });

        }
      } catch (error) {
        console.error("Error:", error);
      }
    };

    if (id) {
      getVariationsData();
    }
  }, [id]);

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

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    try {
      const accessToken = Cookies.get("jazz_token");
      const response = await apiInterceptor.put(
        `/api/admin/variations/${id}`,
        formData,
        {
          headers: {
            authorization: `Bearer ${accessToken}`,
          },
        }
      );
      if (response) successNotify();
    } catch (error) {
      errorNotify();
    }
  };

  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-semibold text-center text-[#FE342B] ">
          UPDATE VARIATIONS NAME
        </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="variationName"
                  className="block mb-2 text-sm font-medium text-[#FE342B] "
                >
                 Variations Name
                </label>
                <input
                  type="text"
                  id="variationName"
                  name="variationName"
                  value={formData.variationName}
                  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"
                  required
                />
              </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-[#FE342B] hover:text-white transition-all duration-300"
          >
            Update
          </button>
        </form>
      </div>
    </section>
  )
}

export default UpdateVariations;