import React, { useState } from "react";
import Modal from "@/components/Modal/Modal";
import CustomSelect from "@/components/Select/CustomerSelect";
import CustomUploadBtn from "@/components/UploadBtn/CustomUploadBtn";
import { Trash2 } from "lucide-react";
import { useUploadEducationalVideos } from "@/models/Education/EducationModel";
import { getCookie } from "cookies-next";
import { useAddTopic } from "@/models/Topic/TopicModel";

const AddTopic = ({
  isOpen,
  setIsOpen,
}: {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
}) => {
  const user = getCookie("lookna_admin");
  const parsedUser = user ? JSON.parse(user as string) : null;
  const adminID = parsedUser?.data?.user?._id;

  const [form, setForm] = useState<{
    title: string;
    description: string;
  }>({
    title: "",
    description: "",
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const { handleCreateTopic, isLoading } = useAddTopic({ setIsOpen });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    handleCreateTopic(form);

    setForm({
      title: "",
      description: "",
    });
  };

  return (
    <>
      <Modal
        width={"w-full sm:w-[55vw] md:w-[55vw] lg:w-[65vw]"}
        height={"max:h-[80vh]"}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Add Topic"
        footer={
          <div className="text-center pt-2">
            {isLoading ? (
              <button
                className="px-4 py-2 bg-[var(--primary-theme-color)] text-white rounded"
                // onClick={handleSubmit}
                type="submit"
              >
                Creating...
              </button>
            ) : (
              <button
                className="px-4 py-2 bg-[var(--primary-theme-color)] text-white rounded"
                onClick={handleSubmit}
                type="submit"
              >
                Create
              </button>
            )}
          </div>
        }
      >
        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-2">
              <label className="text-sm text-textColorDark">Title</label>
              <input
                type="text"
                placeholder="Your Title..."
                className="p-2 md:p-3 rounded-md bg-transparent text-white focus:outline-none border-2 focus:border-white focus:border-2 placeholder:text-[12px] md:placeholder:text-[14px]"
                name="title"
                value={form.title}
                onChange={handleChange}
              />
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-sm text-textColorDark">Description</label>
              <textarea
                placeholder="Add Description..."
                style={{ height: "100px" }}
                className="p-2 md:p-3 rounded-md bg-transparent text-white focus:outline-none border-2 focus:border-white focus:border-2 placeholder:text-[12px] md:placeholder:text-[14px]"
                name="description"
                value={form.description}
                onChange={handleChange}
              />
            </div>
          </div>
        </form>
      </Modal>
    </>
  );
};

export default AddTopic;