import React, { useState, useEffect } from 'react';
import { getItemsByOwner } from "./UniversalCrudHelpers";
import { AtomSpinner } from 'react-epic-spinners';
import { glassmorphic, neuromorphicInput2, glassButton } from "../../styles/tailwindStyles";
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
import { ItemRenderer } from './ItemRenderer'; // Import the ItemRenderer component
import SchemaSelector from "../Schemas/SchemaSelector.jsx";

const GetAllByOwner = ({ model, id, endpoint, token,  CardComponent, setMode , handleSchemaSelect }) => {
    const auth = useAuthUser();

    // console.log("Getting all for the owner " , model , id)
    const [formData, setFormData] = useState({
        model:  model || '',
        id: auth?.id || auth?.user?._id || id || 'Please Login',
        endpoint: endpoint || 'LeumasAPI' || '',
        token: token || auth?.token || '',
        card: <div>model.id</div>
    });
    // console.log("Default data to send " , formData , )
    
    const [itemData, setItemData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
    const [modelIcon, setModelIcon] = useState(null);


    useEffect(() => {
        if (!token) {
            // Handle unauthenticated scenario here
        }
    }, [token]);

    useEffect(() => {
        if (formData.model && formData.id && formData.endpoint) {
            handleGetById();
        }
    }, [formData]);

    const handleChange = (e) => {
        setFormData(prevState => ({ ...prevState, [e.target.name]: e.target.value }));
    }

    const handleGetById = async () => {
        setIsLoading(true);
        setError(null);
        try {
            const item = await getItemsByOwner(model, auth?.id || auth?.user?._id, "LeumasAPI", auth?.token);
            console.log(item);
            setItemData(item);
            setIsLoading(false);
        } catch (error) {
            setIsLoading(false);
            setError("Failed to fetch the item by ID.");
            console.error("Failed to fetch the item by ID:", error);
        }
    };

    return (
        <div className='flex flex-col gap-2'>

{/* Ignore this , this is meant for LeumasAI and Admin Applications only */}
{/* {handleSchemaSelect ? 
      <div className='flex p-2'>
        <SchemaSelector onSchemaSelect={handleSchemaSelect} />
            <button className={glassButton} onClick={handleGetById}>
                {modelIcon && <modelIcon className='mr-2' />} 
                Fetch
            </button>
        </div>      
: <div> </div>} */}



            {(!formData.id || !formData.endpoint) && (
                <div className={glassmorphic + " p-4 space-y-4 max-w-xs text-xs"}>
                    {/* Use SchemaSelector instead of an input for model */}
        
                    <input className={neuromorphicInput2} name="id" placeholder="ID" value={formData.id} onChange={handleChange} />
                    <input className={neuromorphicInput2} name="endpoint" placeholder="Endpoint" value={formData.endpoint} onChange={handleChange} />
                </div>
            )}






            {isLoading && (
                <div className="mt-4 flex justify-center">
                    <AtomSpinner color="blue" />
                </div>
            )}

            {error && (
                <div className="mt-4 bg-red-200 text-red-700 p-3 rounded-md">
                    {error}
                    <div className="mt-2 flex justify-center">
                        <AtomSpinner color="red" />
                    </div>
                </div>
            )}

<ItemRenderer 
    model={model} 
    renderData={itemData} 
    setMode={setMode} 
    setIcon={setModelIcon} 
    token={auth?.token}
/>


        </div>
    )
}

export default GetAllByOwner;