import React, { useState, useEffect } from 'react';
import { getAllItems } from "./UniversalCrudHelpers";  // Assuming you have a function like this for getting all items
import { AtomSpinner } from 'react-epic-spinners';
import { glassmorphic, neuromorphicInput2, glassButton } from "../../../styles/tailwindStyles";
import { useAuthUser } from "react-auth-kit";
import { ItemRenderer } from '../../ItemRenderer'; // Import the ItemRenderer component
import SchemaSelector from "../Schemas/SchemaSelector.jsx";

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

    const [formData, setFormData] = useState({
        model: model || '',
        endpoint: endpoint || 'LeumasAPI' || '',
        token: token || auth()?.token || '',
        card: <div>model.id</div>
    });
    
    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.endpoint) {
            handleGetAll();
        }
    }, [formData , auth()?.id]);

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

    const handleGetAll = async () => {
        setIsLoading(true);
        setError(null);
        try {
            const items = await getAllItems(model, "LeumasAPI", auth()?.token);  // This assumes you have a function to get all items
            console.log(items);
            setItemData(items);
            setIsLoading(false);
        } catch (error) {
            setIsLoading(false);
            setError("Failed to fetch all items.");
            console.error("Failed to fetch all items:", error);
        }
    };

    return (
        <div className='flex flex-col gap-2'>
            <div className='flex p-2'>
                <SchemaSelector onSchemaSelect={handleSchemaSelect} />
                <button className={glassButton} onClick={handleGetAll}>
                    {modelIcon && <modelIcon className='mr-2' />} 
                    Fetch
                </button>
            </div>

            {(!formData.endpoint) && (
                <div className={glassmorphic + " p-4 space-y-4 max-w-xs text-xs"}>
                    <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 GetAllItems;