import React, { useEffect, useState } from 'react';
import { getAllItems } from './UniversalCrudHelpers';
import ToggleStatus from './ToggleStatus';
import DeleteItem from "./DeleteItem"
import {LeumasBaseStyle} from "../../../styles/baseStyles"
import { useAuthUser } from "react-auth-kit";


const CustomDropdown = ({ model, modelArray, endpoint, token, onSelectedChange , color = "blue"}) => {
    const [isOpen, setIsOpen] = useState(false);
    const [selected, setSelected] = useState("--Select a boilerplate--");
    const [models, setModels] = useState([]);
    const auth = useAuthUser();
    console.log("Model array : ",modelArray , model)
    useEffect(() => {
        const fetchItems = async () => {
            try {
                const items = await getAllItems(model, endpoint, token);
                setModels(items);
            } catch (error) {
                console.error("Error fetching boilerplates:", error);
            }
        };

        if (!modelArray) {
            fetchItems();
        } else {
            setModels(modelArray);
        }

    }, [model, endpoint, token, modelArray]);

    const handleSelect = (item) => {
        setSelected(item?.title || item?.name);
        setIsOpen(false);
        onSelectedChange(item);
    };

    return (
        <div className={`relative w-full  `}>
            <fieldset 
                className={`w-full border p-2 cursor-pointer rounded-lg px-4 `}
                onClick={() => setIsOpen(!isOpen)}
            >
                <legend className='text-xl font-bold'>{model}(s)</legend>
                {selected}
            </fieldset>
            {isOpen && (
                <div className={`absolute top-full left-0 w-full border mt-2 z-50 bg-white text-black rounded-lg max-h-[150px] overflow-y-scroll  ${LeumasBaseStyle}`}>
                    {models.map((modelItem, index) => (
                        <div 
                            key={index} 
                            className="p-2 border-2 rounded-lg hover:border-electric-blue text-black  flex justify-between cursor-pointer"
                            onClick={() => handleSelect(modelItem)}
                        >


                        <div className='flex flex-col gap-2'>
                            {modelItem?.title || modelItem?.name || modelItem?.collectionName || modelItem?.gptPrompt?.substring(0,10)}...
                            
                            {modelItem?.owner?._id === auth()?.id && (
                                <ToggleStatus 
                                    model={model}
                                    isPublished={modelItem?.isPublished || modelItem?.public}
                                    endpoint={endpoint}
                                    itemId={modelItem._id} 
                                    token={token}
                                    onToggleChange={() => {}}
                                />
                            )}
                        </div>
                            {modelItem?.owner?._id === auth()?.id && (
                                <DeleteItem 
                                    model={model}
                                    isPublished={modelItem?.isPublished || modelItem?.public}
                                    endpoint={endpoint}
                                    id={modelItem._id} 
                                    token={token}
                                    onToggleChange={() => {}}
                                />
                            )}

                            


                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

export default CustomDropdown;