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

interface FormData {
  brandName: string;
}

const BrandName: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({ brandName: "" });

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

  const handleChange = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    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.post(
        "/api/admin/brands",
        formData,
        {
          headers: {
            authorization: `Bearer ${accessToken}`,
          },
        }
      );
      if (response.status === 201) {
        successNotify();
      }
    } catch (error) {
      errorNotify();
    }
  };

  return (
    <section className="bg-white w-[80%] md:w-[50%] mx-auto h-screen">
      <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-sm">
        <Toaster
          toastOptions={{
            className: "",
            duration: 5000,
            style: {
              marginTop:"4rem",
              background: "#FE342B",
              color: "#fff",
            },
          }}
        />
        <h2 className=" mb-4 text-3xl sm:text-4xl tracking-tight font-extrabold text-center text-[#FE342B]">
          Add Brand Name
        </h2>

        <form action="#" className="space-y-8" onSubmit={handleSubmit}>
          <div className="space-y-8">
            <div>
              <label
                htmlFor="brandName"
                className="block mb-2 text-sm font-medium text-[#FE342B] dark:text-gray-700"
              >
                Brand
              </label>
              <input
                type="text"
                id="brandName"
                name="brandName"
                value={formData.brandName}
                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    focus:outline-none"
                placeholder="Enter BrandName here..."
                required
              />
            </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>
          </div>
        </form>
      </div>
    </section>
  );
};

export default BrandName;