import { useState, useEffect } from 'react';
import { editItem } from "./UniversalCrudHelpers";
import { AtomSpinner } from 'react-epic-spinners';
import { glassmorphic, neuromorphicInput2 } from "../../../styles/tailwindStyles";
import {LeumasBaseStyle} from "../../../styles/baseStyles.js"
import React from 'react';

const EditItem = ({ model, id, endpoint, data: propData , token }) => {


  const [formData, setFormData] = useState({
    model: model || "Endpoint",
    id: id || '',
    endpoint: "LeumasAPI",
    data: propData || {}
  });
  
  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 handleEdit = async () => {
    setIsLoading(true);
    setError(null);
    console.log("form data to submit " , formData)
    try {
      const editedItem = await editItem(formData.model, formData.id, formData.data, formData.endpoint, token);
      setIsLoading(false);
      console.log(editedItem);
    } catch (error) {
      setIsLoading(false);
      setError("Failed to edit the item.");
      console.error("Failed to edit the item:", error);
    }
  };

  return (
    <div className='flex flex-col gap-2'>
      {
        (!model || !id || !endpoint || !propData) && (
          <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} />
            <input className={neuromorphicInput2} name="data" placeholder="Data" value={formData.data} onChange={handleChange} />
          </div>
        )
      }
      <button className={LeumasBaseStyle} onClick={handleEdit}>Edit</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 EditItem;