import { useState, useEffect } from 'react';
import { deleteItem } from "./UniversalCrudHelpers";
import { AtomSpinner } from 'react-epic-spinners';
import { glassmorphic, neuromorphicInput2, glassButton } from "../../../styles/tailwindStyles";
import { useAuthUser } from "react-auth-kit";
import {LeumasBaseStyle} from "../../../styles/baseStyles"
import React from 'react';

const DeleteItem = ({ model, id, endpoint , token , onToggleChange }) => {
    const auth = useAuthUser();
    const userId = auth()?.id;
  const [formData, setFormData] = useState({ model: model || '', id: id || '', endpoint: endpoint || 'LeumasAPI' , userId: userId });
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

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

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

  const handleDelete = async () => {
    setIsLoading(true);
    setError(null);
    confirm("Are you sure you want to delete this item")
    try {
      const deletedItem = await deleteItem(formData.model, formData.id, formData.endpoint, token);
      setIsLoading(false);
      console.log(deletedItem);
    } catch (error) {
      setIsLoading(false);
      setError("Failed to delete the item.");
      console.error("Failed to delete the item:", error);
    }
  };

  return (
    <div className='flex flex-col gap-2'>
      {
        (!model || !id || !endpoint) && (
          <div className={glassmorphic + " p-4 space-y-4 max-w-xs text-xs"}>
            <input className={neuromorphicInput2} name="model" placeholder="Model" value={formData.model} onChange={handleChange} />
            <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>
        )
      }
      <button className={`border-2 p-2 rounded-lg shadow-xl`} onClick={handleDelete}>Delete</button>

      {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>
      )}
    </div>
  )
}

export default DeleteItem;